基于DOM卡片value值（0/1）控制按钮显示的JS代码问题排查与解决

你的问题核心在于全局选择器覆盖了之前的操作。每次循环里，你用$(".off").show()和$(".on").hide()的时候，会选中页面上所有的.off和.on按钮。因为循环顺序是b1→b2→b3，最后一次循环处理的是value=1的b3，这时候会把所有按钮都设置为ON显示、OFF隐藏，所以前面b1的设置被覆盖了，导致所有卡片都只显示ON。

修正方案（统一用jQuery简化代码） #

我们可以直接遍历每个.card元素，针对当前卡片内的按钮进行操作，而不是全局选择：

$(".card").each(function() {
  // 获取当前卡片的value属性值
  const val = $(this).attr("value");
  // 找到当前卡片内的ON和OFF按钮
  const $onBtn = $(this).find(".on");
  const $offBtn = $(this).find(".off");
  
  if (val == 0) {
    $offBtn.show();
    $onBtn.hide();
  } else {
    $offBtn.hide();
    $onBtn.show();
  }
});

如果你想保留原生JS的写法（去掉jQuery依赖） #

也可以完全用原生DOM操作来实现，避免混用的混乱：

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  const card = cards[i];
  const val = card.getAttribute("value");
  const onBtn = card.querySelector(".on");
  const offBtn = card.querySelector(".off");
  
  if (val == 0) {
    offBtn.style.display = "block";
    onBtn.style.display = "none";
  } else {
    offBtn.style.display = "none";
    onBtn.style.display = "block";
  }
}

额外优化建议 #

• 不建议给div元素用value属性，这是表单元素的标准属性，div用自定义属性应该遵循HTML规范，改用data-*格式，比如data-value="0"，获取时可以用$(this).data("value")（jQuery）或者card.dataset.value（原生JS）。
• 初始可以给所有按钮加上display: none的CSS，避免页面加载时短暂显示所有按钮的闪烁问题。

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