如何使用Javascript查找所有匹配的类并允许它们都运行函数_Javascript

如何使用Javascript查找所有匹配的类并允许它们都运行函数

javascript

如何使用Javascript查找所有匹配的类并允许它们都运行函数,javascript,Javascript,下面将只找到第一个可用类并运行我的函数。我需要它来找到所有可用的类，这样所有的类都可以享受函数的乐趣我该怎么做 this.DOM = {}; this.DOM.available = this.DOM.product.querySelector('.available'); this.DOM.available.addEventListener('click', () => this.open()); 完整代码 class Item { constructor(e

下面将只找到第一个可用类并运行我的函数。我需要它来找到所有可用的类，这样所有的类都可以享受函数的乐趣

我该怎么做

this.DOM = {};
this.DOM.available = this.DOM.product.querySelector('.available');

this.DOM.available.addEventListener('click', () => this.open());

完整代码

    class Item {
      constructor(el) {
        this.DOM = {};
        this.DOM.el = el;
        this.DOM.product = this.DOM.el.querySelector('.product');
        this.DOM.productBg = this.DOM.product.querySelector('.product__bg');
        this.DOM.productImg = this.DOM.product.querySelector('.product__img');
        this.DOM.available = this.DOM.product.querySelectorAll('.available');

        this.info = {
          img: this.DOM.productImg.src,
          title: this.DOM.product.querySelector('.product__title').innerHTML,
          subtitle: this.DOM.product.querySelector('.product__subtitle').innerHTML,
          // description: this.DOM.product.querySelector('.product__description').innerHTML,
          price: this.DOM.product.querySelector('.product__price').innerHTML
        };

        this.initEvents();
      }
      open() {
        DOM.details.fill(this.info);
        DOM.details.open({
          productBg: this.DOM.productBg,
          productImg: this.DOM.productImg
        });
      }
      initEvents() {
        this.DOM.available.addEventListener('click', () => this.open());
      }

    };

用于获取所有匹配元素的集合，然后用于循环该集合并分配事件处理程序：

this.DOM = {};
this.DOM.available = this.DOM.product.querySelectorAll('.available');
this.DOM.available.forEach(function(item){  
  item.addEventListener('click', () => item.open());
});

用于获取所有匹配元素的集合，然后用于循环该集合并分配事件处理程序：

this.DOM = {};
this.DOM.available = this.DOM.product.querySelectorAll('.available');
this.DOM.available.forEach(function(item){  
  item.addEventListener('click', () => item.open());
});

你考虑过使用和forEach吗？你考虑过使用和forEach吗？我试过了，但出现了一个错误。我已经添加了我的完整代码，也许你能注意到这个问题？“未捕获的TypeError:无法读取HtmlLevel上未定义的属性'open'。@Endothermic\u Dragon您不需要将从

.querySelectorAll（）

返回的集合转换为数组，以便能够对其调用

.forEach（）

。DOM集合支持该接口。@这不是必需的。您可以直接从

.queryselectoral（）

调用返回的集合

.forEach（）

，如我在回答中所示。您提到的错误表明您正试图调用

div

元素上的

.open

方法，但是

div

元素没有

open

方法。这是由于在回调中使用了arrow函数造成的。在箭头函数中，

此

保持不变，因此您应该使用对元素的引用。@monsaic123查看我更新的注释和答案。您在回调中使用

这个

就是问题所在。@monsaic123我已经更新了答案来说明这一点。不要使用

this

，而是使用

.forEach（）

循环变量--在我的示例中，这是

项

。我尝试了这个方法，但出现了一个错误。我已经添加了我的完整代码，也许你能注意到这个问题？“未捕获的TypeError:无法读取HtmlLevel上未定义的属性'open'。@Endothermic\u Dragon您不需要将从

.querySelectorAll（）