Question

我在jQuery中有一段代码，需要重写为纯JS。我找到了元素数组，需要为每个元素添加onclick事件。但我对身体功能需要放置的内容有问题。

的jQuery

  let Accordion = function (el) {
  this.el = el;
  let dropdownlink = $(".accordion-menu").find('.dropdownlink');

  dropdownlink.on('click', {
      el: this.el
  }, this.dropdown); 
};

的JavaScript

let Accordion = function (el) {
  var dropdownlink = [];
  var outers = document.querySelectorAll('.accordion-menu');

        for (var i = 0; i < outers.length; i++) {
            var elements_in_outer = outers[i].querySelectorAll(".dropdownlink");
            elements_in_outer = Array.prototype.slice.call(elements_in_outer);
            dropdownlink = dropdownlink.concat(elements_in_outer);
        }     

 for (var i = 0, len = dropdownlink.length; i < len; i++) {
    dropdownlink[i].onclick = function () {

      // Any ideas?

    }
}};

Answer 1

好像你的代码要多得多。

首先，您不需要单独的选择来获取dropdownlink元素。只需将它们包含在选择器中即可。

然后，如果您需要引用el，您可以直接从处理程序执行此操作。通过使用箭头函数，您还可以使用this构造函数中的Accordion值。

let Accordion = function (el) {
  this.el = el;
  const dropdownlinks = document.querySelectorAll('.accordion-menu .dropdownlink');  
  const handler = () => {
    this.dropdown(); // You can access the outer `this` value
    console.log(this.el);
  };

  for (const link of dropdownlinks) {
    link.onclick = handler
  }
};

从jQuery到纯JS的onclick函数

1 个答案: