Question

我创建了一个商店，其中包含从 js 生成的产品列表，并且我为每个产品附加了一个事件侦听器。出于排序目的，我决定重新创建 dom 以按我想要的顺序放置产品，但问题是点击事件不起作用，我不知道为什么。我的思路是，如果某些东西是全局声明的，它应该可以从应用程序的各个角落访问。我说得对吗？

const grid = document.querySelector('.grid');
//arr of products
const productsArr = [{
    name: 'Aname1',
    price: 200
  },
  {
    name: 'Cname2',
    price: 2000
  },
  {
    name: 'Zname3',
    price: 28
  },
  {
    name: 'Pname4',
    price: 5
    
  }

];
const paintProducts = function() {
  productsArr.forEach(product, () => {
    let price = product.price;
    let name = product.name;
    //create html
    productsHtml = `<div  product data-price="${price}"   data-name = "${name}">
     <h6 class="price">${price} coco</h6>
      <p class="product-descr">${description}</p>
      </div>`
  });
  //insert html
  grid.insertAdjacentHTML('beforeend', productsHtml);
};
paintProducts();
// filter
const aZBtn = document.querySelector('.a-z');

const filterAlphabetically = () => {
  allInstruments.sort(function(i, j) {
    if (i.name < j.name) {
      return -1;
    }
    if (i.name > j.name) {
      return 1;
    }
    return 0;
  });
};
//clean the dom
const cleanGrid = function() {
  grid.innerHTML = '';
};

aZBtn.addEventListener('click', function() {
  filterAlphabetically();
  cleanGrid();
  paintProducts();
  clickOnProduct();
});
const products = document.querySelectorAll(".product")
const clickOnProduct = function() {
  products.forEach(function(product) {
      product.addEventListener('click', () => {
          console.log("something here")
        
      })
  })
 }

<div class="grid-container">
  <div class="a-z">Alphabetically</div>
  <div class="grid">
  </div>
</div>

Answer 1

首先我在C中发现了一个逻辑缺陷

以下行在循环之外，因此只能渲染 1 个项目，即最后一个。 paintProducts

第二个在 grid.insertAdjacentHTML('beforeend', productsHtml);。有一个神秘变量弹出filterAlphabetically，替换为allInstruments。

第三个问题是productsArr。这在 const products = document.querySelectorAll(".product") 函数之外。由于每次重绘都会生成新的 DOM 元素，因此排序后需要将事件绑定到新元素上。

第四个问题是产品 div 本身，它包含 clickOnProduct 但您使用的是引用类的查询选择器，所以这应该是 <div product ...

解决上述所有问题后，我们的结果是：

<div  class="product"  ...

单击事件侦听器不粘。香草js

1 个答案: