我需要单击一组元素中的单个元素，并选择该元素和另一组具有相同索引的元素。每个集合通常由数组中的2到6个索引组成（下面的示例有3个：[ 0，1，2 ]），并且两个集合（表单单选按钮和数据本身）始终具有匹配的索引数。
例如：当在表单中单击索引1时，只有承载索引1的数据应可见。数据集中未单击的所有元素都应隐藏，因为一次只能显示1个元素。如果单击索引1，我应该看到[ 5g，7 g，3g ]（每行的第二个索引）。如果索引0被点击，我应该看到[54 mg，76 mg，15 mg]（每行的第一个索引）.
单击数据本身不应有任何影响。
以下是我尝试的：
<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>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;
}$（this）可以正常工作，但它下面的两行不行。
$(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");
});
});如何根据在“label”中点击的索引选择“.row -> .rowData -> div”？
1条答案
按热度按时间vybvopom1#
可以从单击的元素中获取索引值吗：
然后使用它来选择
.row类元素中的任何div，以index作为属性，并单击index的值？最好先隐藏所有内容，然后再显示新行
编辑：
$(this).attr('index')获取实际的索引属性。$(this).index()获取元素在parent中与兄弟元素的索引。下面演示了使用
$(this).index()和$(this).attr('index')，不过，对于后者，我需要调整HTML的设置方式。