onclick添加一个类&然后删除类,如果类是特定的东西

时间:2018-03-22 02:12:14

标签: javascript

所以我对JavaScript&我不知道如何处理我正在做的事情。

        <div class="site yellow jackpot crash coinflip">
            <div class="site-image-container">
                <img class="site-image" src="image.png" alt="site-image.png">
            </div>
            <p class="site-name">TEST</p>
            <a class="site-link" href="#"><i class="fas fa-external-link-alt"></i></a>
            <p class="site-amount">$0.1</p>
            <p class="site-code">CODE</p>
        </div>

        <div class="site yellow cases">
          <div class="site-image-container">
            <img class="site-image" src="image.png" alt="site-image.png">
          </div>
          <p class="site-name">TEST</p>
          <a class="site-link" href="#"><i class="fas fa-external-link-alt"></i></a>
          <p class="site-amount">$0.50</p>
          <p class="site-code">CODE</p>
        </div>

        <div class="site red roulette crash dice coinflip">
            <div class="site-image-container">
                <img class="site-image" src="image.png" alt="site-image.png">
            </div>
            <p class="site-name">TEST</p>
            <a class="site-link" href="#"><i class="fas fa-external-link-alt"></i></a>
            <p class="site-amount">$0.50</p>
            <p class="site-code">CODE</p>
        </div>


        <div class="site purple upgrade">
            <div class="site-image-container">
                <img class="site-image" src="image.png" alt="site-image.png">
            </div>
            <p class="site-name">TEST</p>
            <a class="site-link" href="#"><i class="fas fa-external-link-alt"></i></a>
            <p class="site-amount">$0.10</p>
            <p class="site-code">CODE</p>
        </div>

我想为所有具有“site”&amp;类的div添加一个display-none类。那么我想从所有div中删除display-none类,其中包括“roulette”&amp;我希望用一个onclick

完成所有这些

1 个答案:

答案 0 :(得分:0)

选择要隐藏的元素。在这个例子中,它使用not()选择器来过滤掉.roulette类。

然后在所选元素上设置隐藏类。

curl --anyauth --user admin:admin -X GET --create-dirs 
  -o /Collection/SomeDatabase/LargeDoc.xml 
  "http://localhost:8000/v1/documents?uri=/Collection/SomeDatabase/LargeDoc.xml&database=SomeDatabase"
//select with class site, but not roulette
const elsToHide = document.querySelectorAll(".site:not(.roulette)");


//on click
//loop these elements and add class 'hide-me'
document.addEventListener("click", function(){
  Array.from(elsToHide).forEach(el=>{
    el.classList.add("hide-me");
  });
});
.hide-me {
  display: none;
}