使用this和not组合两个jQuery语句

Combining two jQuery statements using this and not

本文关键字：两个 jQuery 语句 this not 组合 使用      更新时间：2024-01-21

我目前必须为此使用两个语句，如果可能的话，我想将其合并为一个语句。

CSS的层次结构是-

div#optionsbox1
    div.checkbox
      a.help
    div.checkbox
      a.help

我想将Class（'readOnly'）添加到没有单击.help的div.checkbox中。因此，如果我在第一个div复选框中单击了.help，我希望在第二个div.checkbox中应用.addClass（"adOnly"），反之亦然。

以下是我目前正在使用的语法。

$("#optionsbox1 .checkbox").addClass('readOnly');
$(this).parent(".checkbox").removeClass('readOnly');

这是整个功能-

$(this).click(function()
{
    if($(this).attr('checked')){
        if($(this).hasClass('readOnly')){
            $(this).removeClass('readOnly');
        }
        $("#optionsbox1 :checkbox").not(this).prop('checked',false);
        $("#optionsbox1 .checkbox").addClass('readOnly');
        $(this).parent(".checkbox").removeClass('readOnly');
        $(this).prop('checked',true);
    } else {
        $(this).prop('checked',false);
        $("#optionsbox1 :checkbox").removeClass('readOnly');
    }
});

我不确定将其转换为一个元素会带来什么好处，但基本想法是使用not（）从集合中删除元素。

var clickedBox = $(this).parent(".checkbox");
var allBoxes = $("#optionsbox1 .checkbox");
allBoxes.not(clickedBox).addClass('readOnly');

另一种方式，如果.checkbox元素是兄弟

$(this).parent(".checkbox").siblings().addClass('readOnly');

通过+epascarello的例子和一个小改动，我能够找出如何将我的两个语句简化为一个。

epascarello原始解决方案的修改版本

$("#optionsbox1 .checkbox").not($(this).parent('.checkbox')).addClass('readOnly');

Epascarello的解决方案，我最终使用-

$(this).parent(".checkbox").siblings(".checkbox").addClass('readOnly');
相关文章：