如何用jQuery根据点击标签的索引选择并显示对应数据元素

需求：

• 点击带set="foo"属性的label时，将当前label设为state="visible"，同组其他label设为state="hidden"
• 同时显示所有.row > .rowData下、拥有相同index属性且set="foo"的div元素，隐藏其他index的div（如点击index=1的label，显示所有index=1的div：5g、7g、3g）
• 点击数据元素无交互效果

当前Label的状态切换正常，但数据元素的匹配逻辑失效，需修正数据元素的选择逻辑。

现有代码 #

HTML #

<div>
  <form id="form" method="get" onsubmit="return false"></form>
  <label for="foo_0" set="foo" state="hidden">Option 1</label>
  <input form="form" name="fooItem" id="foo_0" index="0" type="radio" set="foo" style="display: none;" />
  <label for="foo_1" set="foo" state="visible">Option 2</label>
  <input form="form" name="fooItem" id="foo_1" index="1" type="radio" set="foo" style="display: none;" />
  <label for="foo_2" set="foo" state="hidden">Option 3</label>
  <input form="form" name="fooItem" id="foo_2" index="2" type="radio" set="foo" style="display: none;" />
</div>
<br />
<br />
<div class="row">
  <div class="rowName">Title 1</div>
  <div class="rowData">
    <div set="foo" index="0" state="hidden">54mg</div>
    <div set="foo" index="1" state="visible">5g</div>
    <div set="foo" index="2" state="hidden">123g</div>
  </div>
</div>
<div class="row">
  <div class="rowName">Title 2</div>
  <div class="rowData">
    <div set="foo" index="0" state="hidden">76mg</div>
    <div set="foo" index="1" state="visible">7g</div>
    <div set="foo" index="2" state="hidden">105g</div>
  </div>
</div>
<div class="row">
  <div class="rowName">Title 3</div>
  <div class="rowData">
    <div set="foo" index="0" state="hidden">15mg</div>
    <div set="foo" index="1" state="visible">3g</div>
    <div set="foo" index="2" state="hidden">87g</div>
  </div>
</div>

CSS #

label[state=visible] {
  border: 1px solid #333333;
}
label[state=hidden] {
  border: 1px solid #cccccc;
}

.row {
  width: 100%;
  margin-top: 6px;
  margin-bottom: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #cccccc;
  overflow: auto;
}

.row > .rowName {
  display: inline-block;
}

.row > .rowData {
  display: inline-block;
  float: right;
}

.row > .rowData > div[state=visible] {
  display: inline-block;
}
.row > .rowData > div[state=hidden] {
  display: none;
}

.row > .rowData > div[state=visible] {
  display: inline-block;
  width: 60px;
  
  text-align: right;
}
.row > .rowData > div[state=hidden] {
  display: none;
}

问题jQuery代码 #

$(document).ready(function() {
  
  $('label[set="foo"]').on("click", function() {
    
    $(this).attr("state", "visible");
    $(this).siblings().attr("state", "hidden");
    
    $('.row > .rowData > div[set="foo"]').attr("state", "visible");
    $('.row > .rowData > div[set="foo"]').siblings().attr("state", "hidden");
    
  });
  
});

解决方案 #

修改后的jQuery代码 #

$(document).ready(function() {
  
  $('label[set="foo"]').on("click", function() {
    // 获取当前点击label对应input的index值
    const targetIndex = $('#' + $(this).attr('for')).attr('index');
    
    // 处理Label状态：当前设为visible，同组其他label设为hidden
    $(this).attr("state", "visible");
    $(this).siblings('label[set="foo"]').attr("state", "hidden");
    
    // 处理数据元素：先隐藏所有同set的div，再显示对应index的div
    $('.row > .rowData > div[set="foo"]').attr("state", "hidden");
    $('.row > .rowData > div[set="foo"][index="' + targetIndex + '"]').attr("state", "visible");
  });
  
});

关键修改说明 #

1. 获取目标索引：Label本身无index属性，通过for属性找到关联的input，再提取input的index值，这是匹配数据元素的核心依据。
2. 精准处理Label兄弟元素：用siblings('label[set="foo"]')替代原有的siblings()，避免误操作input元素。
3. 修正数据元素逻辑：先统一隐藏所有set="foo"的数据div，再精准筛选出index匹配的元素设为visible，确保所有对应索引的数据都显示，其余隐藏，完全符合需求逻辑。

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