javascript - 检查元素是否具有 CSS 类。如果没有添加的话

Question

如何将下面的 jQuery 行转换为 Javascript。我想检查这个元素是否有一个类。如果它没有 CSS 类，我想将其添加到元素中。这些行在下面用星号表示。

Jquery

    var slides = document.querySelectorAll('#slides .slide');
    var currentSlide = 0;


  function goToSlide(n){

  //Remove showing from the current slide
    var thisSlide = slides[currentSlide];

    thisSlide.classList.remove("showing");

  //get position of next slide.
    currentSlide = (n+slides.length)%slides.length;

  //Add current to next slide
    var nextSlide = slides[currentSlide];

 //Check if nextSlide has showing class. If not, add it.
  **
   if (!($(nextSlide).hasClass('showing'))) {
           $(nextSlide).addClass('showing'); 
    }
  **

    }

Answer 1

您可以使用classList及其contains和add方法。

if(!nextSlide.classList.contains(classname)){
      nextSlide.classList.add(classname);
}

function addclass(){
  if(!document.getElementById('div1').classList.contains("new")){
      document.getElementById("div1").classList.add("new");
  }
  else{
      console.log("Already exist");
  }
}

.bg-r{
  width:50px;
  height:50px;
  border:1px solid #000;
}
.new{
  background-color:#f00;
}

<div id="div1" class="bg-r"></div>
<button onclick="addclass();">Add</button>