如何在point类div含value="black"属性时隐藏button按钮

云原生阿岚

2026-8-30

问题根因

你原有代码存在两个核心问题：

直接调用$('.point').attr("value")只会获取第一个匹配.point元素的value属性，不会遍历所有.point节点检查是否存在值为black的项
没有做DOM作用域限定，如果页面存在多个.card模块，会全局隐藏所有.button，而非仅隐藏包含black值point的卡片下的按钮

实现方案

方案1：纯CSS实现（推荐）

无需编写JavaScript逻辑，利用CSS原生选择器即可实现，DOM动态更新时规则会自动生效，适配所有现代浏览器：

/* 当.card容器内存在value="black"的.point元素时，隐藏容器内的.button */
.card:has(.point[value="black"]) .button {
  display: none;
}

方案2：jQuery兼容实现

如果需要兼容不支持:has选择器的旧环境，可按作用域遍历修正逻辑：

// 逐卡片校验，避免多实例场景逻辑混乱
$('.card').each(function() {
  const $currentCard = $(this);
  // 检查当前卡片内是否存在目标point节点
  const blackPointExist = $currentCard.find('.point[value="black"]').length > 0;
  if (blackPointExist) {
    $currentCard.find('.button').hide();
  }
});