如何避免点击按钮时脚本重复修改已处理的product__price元素？

点击"All"按钮后页面会生成/删除product__price类的div，当前脚本会重复处理已修改过的旧div，导致错误计算。需要让脚本只处理新生成的未修改过的元素。

核心思路 #

给已处理完成的div添加自定义属性作为标记，每次处理前先检查这个标记，跳过已处理的元素。

修改后的完整代码 #

const boxes = Array.from(document.getElementsByClassName("btn-default"));
boxes.forEach((box) => {
  box.addEventListener("click", function handleClick(event) {
    console.log("box clicked", event);
    // 定位文本包含"All"的目标按钮
    const targetBtn = Array.from(document.querySelectorAll("button")).find(btn => 
      btn.textContent.includes("All")
    );
    if (!targetBtn) return;

    function convert() {
      // 仅筛选未处理过的新div（排除带data-processed标记的元素）
      const pageDivs = document.querySelectorAll(".product__price:not([data-processed])");
      const exchange = 57;
      
      pageDivs.forEach(div => {
        // 提取价格数值并做容错处理
        const [priceStr] = div.textContent.split(" ");
        const priceNum = parseFloat(priceStr);
        if (isNaN(priceNum)) return;
        
        // 计算转换后价格并更新内容
        const convertedPrice = (priceNum / exchange).toFixed(2);
        div.innerHTML = `${convertedPrice} EUR`;
        // 添加已处理标记，避免后续重复操作
        div.setAttribute("data-processed", "true");
      });
    }
    convert();
  });
});

关键改动说明 #

• 新增处理标记：完成修改后给div添加data-processed="true"属性，下次查询时通过:not([data-processed])精准筛选未处理的新元素
• 改用静态DOM集合：把getElementsByClassName替换为querySelectorAll，后者返回静态集合，避免遍历过程中DOM变化导致的索引混乱
• 优化按钮查找逻辑：用find方法替代循环遍历，代码更简洁高效
• 修复全局变量问题：原代码中for (i = 0)的i是全局变量，改用forEach遍历避免全局污染
• 增加容错机制：判断价格是否为有效数值，避免非预期内容导致的脚本报错
• 规范价格显示：用toFixed(2)保留两位小数，价格格式更统一

场景适配 #

针对你提到的点击"All"按钮后部分旧div保留的场景，该方案会自动跳过所有带有data-processed标记的旧div，仅处理新生成的无标记product__price元素，完全满足需求。

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