向同级添加/删除类
向同级添加/删除类
提问于 2018-02-21 00:40:31
我有带单选按钮的tr。我只能在线选择一个按钮。我需要这样做，当按钮被选中时，只有它保留在行上，其余的都隐藏起来。如果您在所有按钮都隐藏的情况下再次按下该按钮，则它们应该会出现。
我写了一些代码
$('#page tbody tr td:nth-child(2) div:nth-child(2)').click(function () {
if ($('.checked-parent').siblings().hasClass("to-hide")) {
$('.checked-parent').siblings().removeClass("to-hide");
}
});
$('.checked-parent').siblings().addClass("to-hide");我有一组div，其中一个包含.check-parent类，他的所有亲戚都添加了一个要隐藏的类。
如果我用.check-parent类单击diva，则要隐藏的亲属类将被删除，并且它们将再次可见。
我的问题：
1)如何使其在单击添加一个要隐藏的类时隐藏到除具有.checked-parent类的元素之外的所有元素
2)如何让函数函数不是获取页面上所有已存在的关系，而是分别在每一行中工作？(现在，我的所有按钮要么都是可见的，要么都是隐藏的，不管是哪条线)
回答 2
Stack Overflow用户
发布于 2018-02-21 02:04:47
我相信使用适当的jQuery选择器可以大大简化您的问题。在下面，您将看到带有单选按钮的<tr>行。当您选择一个按钮和它的标签将切换(隐藏和显示)。
从第1行开始，我们在所有单选按钮上添加一个click事件处理程序。
然后查找与所单击的单选按钮最接近的<td>元素，并查找该<td>中除所单击的- .not(this)之外的所有单选按钮
然后，对于最近的<td>中的每个单选按钮，我们将在其for属性中切换其可见性和具有匹配id的标签。
如果这只是一个带有单选按钮的普通表单，我建议不要对用户隐藏选择，因为这不是预期的行为，您的用户可能会感到沮丧。
$("input:radio").on("click", function() {
$(this).closest("td").find("input:radio").not(this).each(function() {
var id = $(this).attr("id");
$(this).toggle();
$("label[for='" + id + "']").toggle();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<div> Select something</div>
<label for="test1"> Test 1</label>
<input id="test1" type="radio" name="group1" value="test1">
<label for="test2"> Test 2</label>
<input id="test2" type="radio" name="group1" value="test2">
<label for="test3"> Test 3</label>
<input id="test3" type="radio" name="group1" value="test3">
</td>
</tr>
<tr>
<td>
<div> Select something again</div>
<label for="test4"> Test 4</label>
<input id="test4" type="radio" name="group2" value="test4">
<label for="test5"> Test 5</label>
<input id="test5" type="radio" name="group2" value="test5">
<label for="test6"> Test 6</label>
<input id="test6" type="radio" name="group2" value="test6">
</td>
</tr>
</tbody>
</table>
Stack Overflow用户
发布于 2018-02-21 19:32:22
这将隐藏所有具有要隐藏的类的同级，但选中-parent& add's类到所有同级的下一次单击
$('#page tbody tr td:nth-child(2) div:nth-child(2)').click(function () {
if ($('.checked-parent').siblings().hasClass("to-hide")) {
$('.checked-parent').siblings().not('.checked-parent').removeClass("to-hide");
}
else
$('.checked-parent').siblings().not('.checked-parent').addClass("to-hide");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48890087
复制相关文章
相似问题
腾讯云开发者
