如何添加类元素，只有当它已经没有了吗？

Question

如何添加一个类的元素，只有当它已经没有了吗？说我们不知道，如果该元素具有class="desired_class ...但我们要确保它。

Answer 1

尝试这个

var elem = $('selector');
if(!elem.hasClass('desired_class')){
  elem.addClass('desired_class');
 }

Answer 2

此外，您还可以使用classList属性和它的add()方法：

var element = document.getElementById('myElement');
element.classList.add('myClass');

类名只如果元素没有它被添加。

更多关于classList：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 3

我写了检查，如果类将它添加到元素之前存在JavaScript的唯一功能。 （您可以随时使用classList这里提到的，但这种支持与IE10开始。）

function addClass(name, element) {
  var classesString;
  classesString = element.className || "";
  if (classesString.indexOf(name) === -1) {
    element.className += " " + name;
  }
}

var element = document.getElementById('some-element');

addClass("on", element); // Adds the class 'on'
addClass("on", element); // Ignored
addClass("on", element); // Ignored

document.write('Element classes: ' + element.className);

<div id="some-element"></div>

Answer 4

if ($('element').hasClass('some_class')) {
   $('element').addClass('class_name');
}

Answer 5

你确定你想只用jQuery来做到这一点？你可以用简单的JavaScript做

    document.getElementById("elementId").getAttribute("class")

会给你空如果类属性不存在。

Answer 6

在普通的JavaScript检查类别存在通过使用下面的代码。在这里，我检查EL（元素）具有tempClass或不

var el = document.getElementById("div1");

...

if (el.classList.contains("tempClass")){
   return true;
}

Answer 7

if (!$("your_element").hasClass("desired_class")) {
  $("your_element").addClass("desired_class");
}

Answer 8

更新的这个问题的答案是使用toggleClass

 $( "element" ).toggleClass( "className" );

http://api.jquery.com/toggleclass/