Question

每当用户点击body时，我想为某个元素添加一个类，只要该元素没有特定的类。问题是，我重新使用这个元素，其中一些元素将具有我提到的特定类，而其他元素则不会。如果一个元素具有此类，使用我当前的代码，则没有元素将添加新类。

示例：

＆＃13;

$('body').on('click', function(){
    if ($('.box').hasClass('red') && !$('.box').hasClass('stay-red')) {
        $('.box').addClass('blue');
    }
});

＆＃13;

html, body {
    background: lightblue;
    height: 100%;
}
.box {
    height: 20px;
    width: 20px;
    margin-bottom: 10px;
}
.red {
    background: red;
}
.blue {
    background: blue;
}

＆＃13;

<div class="box red stay-red"></div>
<div class="box red"></div>

＆＃13;

Answer 1

$('.box.red:not(.stay-red)').addClass('blue');

这就是你想要的吗？

：not（）选择器https://api.jquery.com/not-selector/

https://jsfiddle.net/7L3ub1sp/

Answer 2

使用filter会更容易，并且可以避免您的问题：

＆＃13;

$('body').on('click', function(){
    $('.box').filter('.red:not(.stay-red)').addClass('blue');
});

＆＃13;

html, body {
    background: lightblue;
    height: 100%;
}

.box {
    height: 20px;
    width: 20px;
    margin-bottom: 10px;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <div class="box red stay-red"></div>
<div class="box red"></div>
  </body>
</html>

＆＃13;

Answer 3

＆＃13;

$(function(){

$('body').on('click', function(){
    $('.box').each(function(){
        if ($(this).hasClass('red') && !$(this).hasClass('stay-red')) {
          $(this).addClass('blue');
        }
    })
    
    
});
  
})

＆＃13;

html, body {
    background: lightblue;
    height: 100%;
}

.box {
    height: 20px;
    width: 20px;
    margin-bottom: 10px;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <div class="box red stay-red"></div>
<div class="box red"></div>
  </body>
</html>

＆＃13;

Answer 4

您可以使用：

$('body').on('click', function(){ 
    $('.box.red:not(.stay-red)').addClass('blue');
});

或者循环遍历所有这些：

$('body').on('click', function(){

    $('.box').each(function() {
        if ($(this).hasClass('red') && !$(this).hasClass('stay-red')) {
            $(this).addClass('blue');
        }
    });

});

Answer 5

如果您想避免将新类添加到所有元素（如果其中一个元素具有另一个类），则可以使用some（或every）：

var els = document.getElementsByClassName('box');
if(![].some.call(els, function(el) {
  return el.classList.contains('stay-red');
}) [].forEach.call(els, function(el) {
  return el.classList.add('blue');
});

Answer 6

以下是您需要的身体：

$('body').on('click', function(){
     $('.box.red:not(.stay-red)').removeClass('red').addClass('blue');
});

你还需要删除类.red，即使在这种精确的情况下它也可以工作，因为类.blue是在CSS中的类.red之后定义的

将类添加到匹配元素而不使用其他特定类

6 个答案: