[英]How do you toggle a class in jquery when label element is clicked?
I have the following code.我有以下代码。 When the checkbox is checked (which is hidden), when the label is pressed around the avatar, I want to add a class "selected" to the outer div (pop-friends-item).当复选框被选中(隐藏)时,当在头像周围按下 label 时,我想将 class “选中”添加到外部 div(pop-friends-item)。
<div class="pop-friends-item">
<label for="user_1" class="check_friend_item">
<input name="invited[]" type="checkbox" value="1" id="user_1" style="display:none;">
<img src="/avatar.jpg"> User 1</label>
</div>
<div class="pop-friends-item">
<label for="user_2" class="check_friend_item">
<input name="invited[]" type="checkbox" value="2" id="user_2" style="display:none;">
<img src="/avatar.jpg"> user 2</label>
</div>
I only got it to add the class to all the items, not just the one thats clicked.我只是将 class 添加到所有项目中,而不仅仅是单击的那个。
This just sets the selected
class.这只是设置selected
的 class。
$("label").click(function() {
$(this).closest("div").addClass("selected");
};
If you want to toggle back and forth:如果要来回切换:
$("label").click(function() {
$(this).closest("div").toggleClass("selected");
};
UPDATE更新
Here's an update to handle the checkbox toggle (set to display) http://jsfiddle.net/qqUHW/1/这是处理复选框切换(设置为显示)的更新 http://jsfiddle.net/qqUHW/1/
$("label").click(function () {
var $this = $(this);
$this.closest("div").toggleClass("selected");
var $checkbox = $("input[type='checkbox']", $this);
if ($checkbox.prop("checked")) {
$checkbox.prop("checked", false);
} else {
$checkbox.prop("checked", true);
}
});
How about this:这个怎么样:
$("label.check_friend_item").click(function() {
$(this).closest("div.pop-friends-item").toggleClass("selected");
var $checkbox = $(this).find('input[type=checkbox]');
if ($checkbox.is(':checked')) {
$checkbox.attr('checked', false);
} else {
$checkbox.attr('checked', true);
}
};
The whole checkbox shebang is probably not necessary if you can use valid HTML, though.不过,如果您可以使用有效的 HTML,则可能不需要整个复选框。
this should do it without the checkbox, if the pop-friends-item
is always the direct parent of the label如果pop-friends-item
始终是 label 的直接父项,这应该不带复选框
$("label").click(function(){
$(".selected").removeClass("selected");
$(this).parent().addClass("selected");
});
if more than one needs selected then this should also work如果选择了多个需要,那么这也应该有效
$(this).parent().toggleClass("selected");
As an alternative, to actually do it using the checkboxes, a change() function could be used, and you would need to hide the checkboxes in a more accessible way:作为替代方案,要实际使用复选框,可以使用change() function,您需要以更易于访问的方式隐藏复选框:
jQuery: jQuery:
$('.pop-friends-item input').change(function() {
if ($(this).is(':checked')) {
$(this).closest('div').addClass("selected");
} else {
$(this).closest('div').removeClass("selected");
}
});
CSS to hide the input instead of display: none;
CSS隐藏输入而不是display: none;
: :
.pop-friends-item input {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip: rect(1px 1px 1px 1px);
}
To make sure you're just adding the class to the correct div, limit your selector a bit more by adding the class of the div.为确保您只是将 class 添加到正确的 div 中,请通过添加 div 的 class 来进一步限制您的选择器。
$("label.check_friend_item").click(function() {
$(this).parents("div.pop-friends-item").toggleClass("selected");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.