将 class 添加到没有其他特定 class 的匹配元素

Question

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

Here is a fiddle showing the behaviour.

示例：

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

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

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

Answer 1

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

这是你想要的吗？

:not() Selector https://api.jquery.com/not-selector/

https://jsfiddle.net/7L3ub1sp/

Answer 2

使用 filter 会容易很多，并且会避免您的问题：

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

html, body {
    background: lightblue;
    height: 100%;
}

.box {
    height: 20px;
    width: 20px;
    margin-bottom: 10px;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

<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>

Answer 3

您可以使用：

$('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 4

$(function(){

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

html, body {
    background: lightblue;
    height: 100%;
}

.box {
    height: 20px;
    width: 20px;
    margin-bottom: 10px;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

<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>

Answer 5

如果你想避免将新的 class 添加到所有元素，如果其中一个元素有另一个 class，你可以使用 some (or 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');
});

您还需要删除 class .red，即使在这种情况下它仍然有效，因为 class .blue 是在 class .red 之后定义的 CSS

将 class 添加到没有其他特定 class 的匹配元素

Add class to matching element without other specific class

javascript

css

jquery

dom-manipulation