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

Question

我通常不用javascript编写,并且自己写了一些问题.我写这样,当用户点击了一个捐赠金额按钮(.amountNum输入[类型="无线电"])捐赠页面上,它打印捐赠总额多少会下面的代码位与一些在线捐赠软件进行交互如果他们支付处理费.除了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);
      })
    })
  }
);

在一般情况下,最好用巴贝尔自动自动transpile从语言到ES5的最新和最伟大的版本的代码,让你写的最轻松的代码,而对于旧的浏览器能够理解它:

https://babeljs.io/repl/