基于data-ischar状态控制按钮显隐：多区块仅首块生效求助

嘿，我来帮你搞定这个问题～你的代码现在只生效第一个区块，核心原因很简单：HTML里的id是唯一的，$("#join")这种id选择器只会匹配页面中第一个带有该id的元素，后面4个区块里的按钮根本没被选中到，自然不会有效果。

下面给你一步步的解决方案：

第一步：调整HTML结构，把id换成类 #

把每个区块里的id="join"、id="delete"、id="create"改成对应的类名，比如class="join-btn"、class="delete-btn"、class="create-btn"。类可以重复用在多个元素上，这正是我们需要的。示例结构如下：

<!-- 第一个区块 -->
<div data-ischar="true" data-charid="1">
  <button class="join-btn">Join</button>
  <button class="delete-btn">Delete</button>
  <button class="create-btn">Create</button>
</div>
<!-- 第二个区块 -->
<div data-ischar="false" data-charid="2">
  <button class="join-btn">Join</button>
  <button class="delete-btn">Delete</button>
  <button class="create-btn">Create</button>
</div>
<!-- 剩下3个区块依此类推 -->

第二步：用jQuery遍历每个区块，单独控制按钮 #

我们需要逐个处理每个带data-charid的区块，根据每个区块自己的data-ischar值，控制区块内的按钮显示状态。代码如下：

// 遍历所有带有data-charid属性的区块
$('[data-charid]').each(function() {
  // 获取当前区块的data-ischar值，jQuery会自动把字符串转成布尔值
  const isChar = $(this).data('ischar');
  
  // 找到当前区块内的三个按钮（只操作当前区块内的元素，不影响其他区块）
  const $joinBtn = $(this).find('.join-btn');
  const $deleteBtn = $(this).find('.delete-btn');
  const $createBtn = $(this).find('.create-btn');

  // 根据isChar的值设置按钮显示状态
  if (isChar) {
    $joinBtn.css('display', 'block');
    $deleteBtn.css('display', 'block');
    $createBtn.css('display', 'none');
  } else {
    $joinBtn.css('display', 'none');
    $deleteBtn.css('display', 'none');
    $createBtn.css('display', 'block');
  }
});

（可选）更优雅的优化：用CSS类控制显示隐藏 #

如果想让代码更符合前端最佳实践，建议把样式逻辑放到CSS里，JS只负责切换类，这样维护起来更方便：

先写CSS样式：

.btn-visible { display: block; }
.btn-hidden { display: none; }

然后修改JS代码：

$('[data-charid]').each(function() {
  const isChar = $(this).data('ischar');
  const $joinBtn = $(this).find('.join-btn');
  const $deleteBtn = $(this).find('.delete-btn');
  const $createBtn = $(this).find('.create-btn');

  if (isChar) {
    $joinBtn.addClass('btn-visible').removeClass('btn-hidden');
    $deleteBtn.addClass('btn-visible').removeClass('btn-hidden');
    $createBtn.addClass('btn-hidden').removeClass('btn-visible');
  } else {
    $joinBtn.addClass('btn-hidden').removeClass('btn-visible');
    $deleteBtn.addClass('btn-hidden').removeClass('btn-visible');
    $createBtn.addClass('btn-visible').removeClass('btn-hidden');
  }
});

这样做的好处是，以后如果要调整显示方式（比如改成opacity: 0或者visibility: hidden），只需要修改CSS，不用动JS代码。

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