将类添加到没有其他特定类的匹配元素答案

【问题标题】：Add class to matching element without other specific class将类添加到没有其他特定类的匹配元素
【发布时间】：2015-07-20 23:45:50
【问题描述】：

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

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>

【问题讨论】：

使用.each方法作为$('.box')返回数组而不是单个元素
假设删除 .red 类 on.blue 是值得的）
但是如果你除了基于类的选择之外没有做太多的 DOM 操作，那么直接使用下面给出的 css 选择器/过滤器

标签： javascript jquery css dom-manipulation

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

这是你想要的吗？

:not() 选择器https://api.jquery.com/not-selector/

https://jsfiddle.net/7L3ub1sp/

【讨论】：

你的意思是$('.red:not(.stay-red)')
缺少一个部分，红色类。 .box.red:not...
然后 $('.box.red:not(.stay-red)')

【解决方案3】：

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

【讨论】：

【解决方案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');
        }
    });

});

【讨论】：

【解决方案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');
});

【讨论】：

【解决方案6】：

这是您需要的正文 onclick：

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

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

【讨论】：