演示

Question

我想使用jquery：not selector这样一种方式，当一堆元素没有指定的类时，我想在其中一个类中添加一个类。

我想要达到的目标是：＆＃39;当design-preview1，design-preview2 design-preview 3和design-preview 4没有类＆＃34;选择＆＃34;，添加类＆＃34;选择＆＃34; to＆＃34; design-preview1＆＃34; ＆＃39;

我尝试了这个但是没有用：

   $(".design-preview1, .design-preview2, .design-preview3, .design-preview4").not(".selected").$(".design-preview1").addClass('selected');
    });

任何帮助都将受到高度赞赏

新

这是我的完整jQuery代码：

$('.pop-design1').click(function(){
            $(".design-preview li:not(.design-preview2).selected").removeClass('selected');
            $(".design-list li:not(.design-list2).selected").removeClass('selected');
            $(".design-preview2").toggleClass('selected');
            $(".design-list2").toggleClass('selected');
            $(".overlay").toggle();
        });
        $('.pop-design2').click(function(){
            $(".design-preview li:not(.design-preview3).selected").removeClass('selected');
            $(".design-list li:not(.design-list3).selected").removeClass('selected');
            $(".design-preview3").toggleClass('selected');
            $(".design-list3").toggleClass('selected');
            $(".overlay").toggle();
        });
        $('.pop-design3').click(function(){
            $(".design-preview li:not(.design-preview4).selected").removeClass('selected');
            $(".design-list li:not(.design-list4).selected").removeClass('selected');
            $(".design-preview4").toggleClass('selected');
            $(".design-list4").toggleClass('selected');
            $(".overlay").toggle();
        });
        if ($('.design-preview1, .design-preview2, .design-preview3, .design-preview4').not('.selected').length) {
    $('.design-preview1').addClass('selected');

基本上我想要的是当.design-preview1，.design-preview2，.design-preview3和.design-preview4未显示或未被选中时，我希望.design-preview1默认显示。
直播链接： http://www.expertfrontend.com/test/2.html

Answer 1

:not对于您正在尝试的内容来说有点过于简单，因为您需要更改多个元素的类，而不是完全相同。所以，你需要几个步骤。除此之外，您还需要使用.filter方法来确定您的任何代码是否包含selected类：

var group = ".design-preview1, .design-preview2, .design-preview3, .design-preview4",
    $group = $(group);

function doDefaultSelection() {
    if ($(".design-preview1, .design-preview2, .design-preview3, .design-preview4")
        .filter(".selected").length === 0) { // note use of .filter here
        $(".design-preview1").addClass('selected');
    }
}

doDefaultSelection();

$group.click(
    function() {
        $group.not(this).removeClass('selected');
        $(this).toggleClass('selected');
        doDefaultSelection();
    }
);

默认选择器函数（doDefaultSelection）选择具有指定类的所有元素，仅选择具有selected类的元素，并检查是否有任何剩余元素。如果没有匹配的元素，则会将selected类添加到.design-preview1元素。

点击处理程序会关闭除{click}元素之外的所有内容的selected类，然后切换您单击的类的类。然后，如有必要，它会再次设置默认值。

演示

var group = ".design-preview1, .design-preview2, .design-preview3, .design-preview4",
    $group = $(group);

function doDefaultSelection() {
    if ($(".design-preview1, .design-preview2, .design-preview3, .design-preview4")
        .filter(".selected").length === 0) {
        $(".design-preview1").addClass('selected');
    }
}

doDefaultSelection();

$group.click(
    function() {
        $group.not(this).removeClass('selected');
        $(this).toggleClass('selected');
        doDefaultSelection();
    }
);

.selected {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="design-preview1">blah</p>
<p class="design-preview2">blah</p>
<p class="design-preview3">blah</p>
<p class="design-preview4">blah</p>

Answer 2

我想要实现的是：当design-preview1，design-preview2时 design-preview 3和design-preview 4没有这个类＆＃34;选择＆＃34;，添加课程＆＃34;选择＆＃34;到＆＃34; design-preview1＆＃34;

根据您的问题中的要求，您说您希望使用.not()来实现此目的。以下是通过addSelectedClassIfNotExists()函数执行此操作的方法。

您还可以重构点击侦听器，因此您只能运行一个已定义的函数。以下是在建议的更改后，您的问题中修改过的代码可能会如下所示：

var previews = $('.design-preview1, .design-preview2, .design-preview3, .design-preview4');

function addSelectedClassIfNotExists() {
    if (previews.not('.selected').length === previews.length) {
        $('.design-preview1').addClass('selected');
    }
}

function toggleClasses(num) {
    $('.design-preview li:not(.design-preview' + num + ').selected').removeClass('selected');
    $('.design-list li:not(.design-list' + num + ').selected').removeClass('selected');
    $('.design-preview' + num).toggleClass('selected');
    $('.design-list' + num).toggleClass('selected');
    $('.overlay').toggle();
}

previews.click(function () {
    toggleClasses(this.className.slice(-1));
    addSelectedClassIfNotExists();
});

Answer 3

如果您想检查他们是否都没有班级JFormattedTextField，那么您可以使用selected条件并将班级添加到if

design-preview1

如果你想检查是否所有人都有班级，那么

if (!$(".design-preview1, .design-preview2, .design-preview3, .design-preview4").hasClass('selected')) {
    $(".design-preview1").addClass('selected');
}

Answer 4

你可以使用not选择器：

var elements = $("p[class^='design-preview']");
elements.each(function(para, i){
if(!$(para).hasClass('selected'))
{
   $(para).addClass('selected');
}
});

我在这里做的是首先选择给定类的所有para元素。之后，我在返回元素数组上应用循环，并检查当前元素是否具有selected类。如果它没有我们添加的选定课程，我们就不会添加。

希望这种逻辑有所帮助。

如何使用jQuery：不是一次选择多个元素

4 个答案:

演示