通过data-product属性定位元素时关联函数重复执行问题咨询

问题成因 #

• 触发次数异常：当前代码遍历所有带data-product属性的.content元素，每匹配到1个值为1或2的元素就调用一次addMessage，你的页面里有2个符合条件的元素，所以函数会被触发2次。
• 作用范围错误：addMessage函数内部每次都会选中页面中所有的.product元素插入提示，每调用一次所有商品都会多插一条Sale标签，最终出现重复插入的情况。
• 额外逻辑漏洞：你用的条件判断'1'.indexOf(el.getAttribute('data-product')) > -1写法有问题，比如当data-product值为11时也会被误匹配，建议直接用全等===判断值更稳妥。

修复方案 #

根据实际需求二选一即可：

方案1：只要存在data-product为1或2的元素，就给所有商品加1次Sale标签 #

// 先筛选所有符合条件的元素，只判断一次
const matchList = document.querySelectorAll('.content[data-product="1"], .content[data-product="2"]');
if (matchList.length > 0) {
  addMessage();
}

function addMessage() {
  document.querySelectorAll('.product').forEach(function(el) {
    el.insertAdjacentHTML("afterend", "<p style='color: red'>Sale</p>");
  });
}

方案2：仅给data-product为1、2对应的单个商品加Sale标签 #

document.querySelectorAll('.content[data-product]').forEach(function(el) {
  const productId = el.getAttribute('data-product');
  // 仅匹配到目标值时，操作当前元素下的.product节点，避免影响其他商品
  if (productId === '1' || productId === '2') {
    el.querySelector('.product').insertAdjacentHTML("afterend", "<p style='color: red'>Sale</p>");
  }
});

内容的提问来源于stack exchange，提问作者leek1234