[英]Using jQuery to add class to containing li when a checkbox inside is clicked
Highlight (by adding a background-color
to) the "row" <li>
if a (nested) checkbox inside that row is clicked. 如果单击该行内的(嵌套)复选框,则突出显示(通过添加
background-color
)“行” <li>
。
In this feature I am working on the interface for a file management system. 在此功能中,我正在处理文件管理系统的界面。 When a user clicks the checkbox they can then delete all the files checked.
当用户单击该复选框时,他们可以删除所有已检查的文件。 to give them visual feedback, i want all of their selected files to have a background color.
为了给他们视觉反馈,我希望他们所有选择的文件都有背景颜色。 This will be done by clicking a checkbox, then i want the
<li>
to be colored. 这将通过单击复选框完成,然后我希望
<li>
被着色。
I found various helpful answers on stackoverflow but have a gap in knowledge and trying to fill that in. Most answers use the parent element. 我在stackoverflow上找到了各种有用的答案,但在知识方面存在差距并试图填补它。大多数答案使用父元素。 But that only helps me by coloring that specific parent that holds the checkbox.
但这只能帮助我着色那个拥有复选框的特定父母。
I have this demo on codepen 我在codepen上有这个演示
$("#this-list :checkbox").on('click', function(){
$(this).parent().toggleClass("checked");
});
.checked {
background: red;
}
<div class="container">
<ul id="this-list">
<li>
<div class="row">
<div class="col-md-2">
<input type="checkbox" />
song.mp3
</div>
<div class="col-md-2">
2011
</div>
<div class="col-md-2">
1 gb
</div>
<div class="col-md-2">
2 min
</div>
</div>
</li>
<!-- More <li>s -->
</ul>
</div>
you could use closest
to get the closest checkboxs li
element: 你可以使用
closest
的获取最接近的复选框li
元素:
$("#this-list :checkbox").on('click', function(){
$(this).closest('li').toggleClass("checked");
});
this method will bubble up the DOM starting from the checkbox until it finds a match for the given selector ( li
in this case). 这个方法将从复选框开始冒泡DOM,直到找到给定选择器的匹配(在本例中为
li
)。
Use .parents([selector]) 使用.parents([selector])
For the li you want this 对于你想要的李
$(this).parents('li').toggleClass("checked");
Or if you only want the row highlighted 或者,如果您只想突出显示该行
$(this).parents('.row').toggleClass("checked");
Or if you only want the cell highlighted 或者,如果您只想突出显示单元格
$(this).parents('.col-md-2').toggleClass("checked");
You are very close! 你很亲密! You can use the .parents() method of jQuery and pass in the class .row.
您可以使用jQuery的.parents()方法并传入类.row。 It would look like this:
它看起来像这样:
$("#this-list :checkbox").on('click', function(){
$(this).parents(".row").toggleClass("checked");
});
EDIT: 编辑:
As @showdev mentioned, if you want the li element, you can just do: 正如@showdev所提到的,如果你想要li元素,你可以这样做:
$(this).parents("li").toggleClass("checked");
As in this Codepen 就像在这个Codepen
$("#this-list :checkbox").on('click', function(){
$(this).closest("li").toggleClass("checked");
});
Alternatively, since the checkbox is contained inside a div
which is inside the target li
you can use: Codepen 或者,由于复选框包含在目标
li
内的div
内,您可以使用: Codepen
$("#this-list :checkbox").on('click', function(){
$(this).parent().parent().toggleClass("checked");
});
Simply add another .parent()
to add the checked
class to the row (the parent of the parent): 只需添加另一个
.parent()
将已checked
类添加到行(父项的父项):
$(this).parent().parent().toggleClass("checked");
See this CodePen fork . 请参阅此CodePen分支 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.