JS如何基于0/1条件为每张卡片单独控制On/Off按钮的展示

问题原因 #

你的代码出现全局统一显示的问题，核心有两点：

• 只定义了一个全局的condition变量，无法存储每张卡片独立的状态值
• 直接用$('.on')/$('.off')选择器会选中页面所有对应类名的按钮，操作会全局生效，自然所有卡片的显示状态完全一致

解决方案 #

我们可以用HTML自定义属性给每张卡片单独存对应的0/1状态，然后遍历每张卡片单独处理内部按钮，完全不需要用toggle方法，符合你的需求：

第一步：修改HTML代码，给每个卡片加data-condition属性，值对应该卡片的0/1状态：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 状态为1的卡片 -->
<div class="card" data-condition="1">
      <div class="card-header">
            <div class="card-title">
             Card 1 
            </div>
      </div>
     <div class ="card-body">
          <button class ="on"> ON </button>
          <button class ="off"> OFF </button>
     </div>
</div>
<!-- 状态为0的卡片 -->
<div class="card" data-condition="0">
      <div class="card-header">
            <div class="card-title">
             Card 2
            </div>
      </div>
     <div class ="card-body">
          <button class ="on"> ON </button>
          <button class ="off"> OFF </button>
     </div>
</div>
<!-- 状态为1的卡片 -->
<div class="card" data-condition="1">
      <div class="card-header">
            <div class="card-title">
             Card 3
            </div>
      </div>
     <div class ="card-body">
          <button class ="on"> ON </button>
          <button class ="off"> OFF </button>
     </div>
</div>

第二步：替换原来的JS逻辑，遍历每张卡片单独处理按钮显示：

// 遍历所有卡片
$('.card').each(function() {
  // 获取当前卡片的独立状态值
  const curCondition = $(this).data('condition')
  // 找到当前卡片内部的两个按钮，单独操作
  const $onBtn = $(this).find('.on')
  const $offBtn = $(this).find('.off')
  
  if(curCondition == 0) {
    $onBtn.hide()
    $offBtn.show()
  } else {
    $offBtn.hide()
    $onBtn.show()
  }
})

后续你要修改某张卡片的显示状态，只需要改对应data-condition的属性值就行，不需要调整JS逻辑。

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