Question

我通常不使用javascript编写自己，但自己陷入了一些问题。我编写了以下代码，以与某些在线捐赠软件进行交互，以便当有人单击捐赠页面上的捐赠金额按钮（.amountNum input [type ='radio']）时，它会打印总捐赠金额如果他们支付加工费。在除Internet Explorer之外的所有浏览器中都有效。原来箭头功能在IE中不起作用，而且我不知道如何在没有它的情况下重写该功能。有指针吗？

var inputs = document.querySelectorAll(".amountNum input[type='radio']");

inputs.forEach(el =>
el.addEventListener('click', function() {
  var value = parseInt(this.value, 10);
  var URL = `https://example.com/display-fee?contribution=${value}&max=2500.00`;
  jQuery.get(URL, function(data) {
    var fee = data.fee;
    var total = fee + value;
    total = total.toFixed(2);
    $("#full-gift-label")[0].innerText = ("I'd like to help cover the transaction fees on my donation. My grand total will be £" + total);
  })
}));

Answer 1

在这种情况下，箭头功能的执行与标准功能相同-只需将el =>替换为function(el) {。

但是，还有另一个问题：如果您想支持IE，querySelectorAll返回一个NodeList，并且只有在较新的浏览器上，您才能forEach直接 NodeList。因此，您必须改为使用Array.prototype.forEach。

除此之外，IE也不支持模板文字，因此请使用普通的字符串连接：

var inputs = document.querySelectorAll(".amountNum input[type='radio']");

Array.prototype.forEach.call(
  inputs,
  function(el) {
    el.addEventListener('click', function() {
      var value = parseInt(this.value, 10);
      var URL = 'https://example.com/display-fee?contribution=' + value + '&max=2500.00';
      jQuery.get(URL, function(data) {
        var fee = data.fee;
        var total = fee + value;
        total = total.toFixed(2);
        $("#full-gift-label")[0].innerText = ("I'd like to help cover the transaction fees on my donation. My grand total will be £" + total);
      })
    })
  }
);

在一般情况下，最好使用Babel自动将您的代码从最新和最高级的语言自动转换为ES5，从而使您最轻松地编写代码，并且对于较旧的浏览器来说，了解它：

https://babeljs.io/repl/

使用箭头功能重写功能以修复IE兼容性

1 个答案: