Question

我有这个代码在PC上完美运行，但它在我的iPad上无法工作（我认为它在任何手机上都不起作用）。我已经尝试过使用Safari和Chrome而没有任何运气。

HTML ：

<input name="Service" type="radio" value="110" onchange="update_cart(this.value, Service2.value )" />
<input name="Service" type="radio" value="111" onchange="update_cart(this.value, Service2.value )" />
<input name="Service2" type="radio" value="112" onchange="update_cart(Service.value, this.value)" />
<input name="Service2" type="radio" value="113" onchange="update_cart(Service.value, this.value)" />

JavaScript ：

function update_cart(radio1,radio2) {
    if (Service == "" || ID_Service == "") {
        document.getElementById("Cart").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        update = new XMLHttpRequest();
    } else { // code for IE6, IE5
        update = new ActiveXObject("Microsoft.XMLHTTP");
    }
    update.onreadystatechange = function() {
        if (update.readyState == 4 && update.status == 200) {
            document.getElementById("Cart").innerHTML = update.responseText;//fills Cart div with result
        }
    }
    update.open("GET", "/new/update_cart.php?radio1=" + radio1 + "&radio2=" + radio2, true);
    update.send();
}

我知道问题出在这里是因为函数update_cart只是接收具有＆＃34; this.value＆＃34;的变量。但不是另一个，例如：当点击/点击第一个无线电时，功能接收（110，未定义），反之亦然，用于第二个无线电（未定义，112）

我的问题是：我在这里做错了吗？这不应该在移动设备上运行吗？对此有何解决方法？

编辑：现在我们有4个选项，我们的想法是能够使用您选中的新项目更新购物车，每次点击另一台收音机时都应该更新购物车。

Answer 1

永远不要使用内联JS（比如HTML中的onchange），除非你使用像Angular这样的框架来理解它。否则，它是有限的，丑陋的，并且可能有错误。

您可以使用库或框架使其更轻，更清洁。像Ractive，Angular，React等的东西有很多帮助。

请参阅代码注释以获取解释。

// get element references
var serviceElems = document.querySelectorAll('[name="Service"]');
var service2Elems = document.querySelectorAll('[name="Service2"]');

// loop through both sets of references and attach "change" listeners
[serviceElems, service2Elems].forEach(function(set) {
  [].forEach.call(set, function(elem) {
    elem.addEventListener('change', myFn);
  });
});

// this is fired when any of the elements are clicked
function myFn() {
  // loop over the sets of elements, mapping values back to `vals`
  var vals = [serviceElems, service2Elems].map(function(set) {
    // find the checked element (if any) from this set
    var checkedElem = [].find.call(set, function(elem) {
      return elem.checked;
    });
    // if one was checked, return its value (maps to vals)
    if (checkedElem) { return checkedElem.value; }
  });
  updateCart(vals[0], vals[1]);
}

var result = document.getElementById('result');
function updateCart(radio1, radio2) {
  result.textContent = 'Service: '+radio1+' Service2: '+radio2;
}

// SHIM FOR ES6 [].find
if (!Array.prototype.find) {
  Array.prototype.find = function(predicate) {
    if (this == null) {
      throw new TypeError('Array.prototype.find called on null or undefined');
    }
    if (typeof predicate !== 'function') {
      throw new TypeError('predicate must be a function');
    }
    var list = Object(this);
    var length = list.length >>> 0;
    var thisArg = arguments[1];
    var value;

    for (var i = 0; i < length; i++) {
      value = list[i];
      if (predicate.call(thisArg, value, i, list)) {
        return value;
      }
    }
    return undefined;
  };
}

<h3>Set 1</h3>
<label>110</label>
<input name="Service" type="radio" value="110">
<label>111</label>
<input name="Service" type="radio" value="111">
<h3>Set 2</h3>
<label>112</label>
<input name="Service2" type="radio" value="112">
<label>113</label>
<input name="Service2" type="radio" value="113">
<h3>Result</h3>
<div id="result"></div>

在AngularJS中查看此内容。使用Angular，我们鼓励您在HTML中使用逻辑。除了函数调用updateCart之外，这不需要任何直接的js。

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  $scope.updateCart = function(radios) {
    console.log.apply(console, radios);
  };
})
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="sets = [[110, 111], [112, 113]]; models = []">
  <div ng-repeat="set in sets">
    <h3>Set {{$index+1}}</h3>
    <div ng-repeat="item in set">
      <label>{{item}}</label>
      <input name="Service" type="radio" ng-value="item" ng-model="models[$parent.$index]" ng-change="updateCart(models)">
    </div>
  </div>
  <div id="result">
    <p ng-repeat="model in models">Model {{$index+1}}: {{model}}</p>
  </div>
</div>

Javascript onchange（this.value，that.value）无法在ipad上运行

1 个答案: