Как мне заставить мою функцию JS пропустить идентификатор CSS и посмотреть только на класс?

Question

Код ниже работает нормально:

 filterSelection("all")
    function filterSelection(c) {
      var x, i;
      x = document.getElementsByClassName("filterDiv");
      if (c == "all") c = "";
      // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
      for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
      }
    }
    
    function w3AddClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {
          element.className += " " + arr2[i];
        }
      }
    }
    
    function w3RemoveClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
          arr1.splice(arr1.indexOf(arr2[i]), 1); 
        }
      }
      element.className = arr1.join(" ");
    }
    
    var btnContainer = document.getElementById("myBtnContainer");
    var btns = btnContainer.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }

 .container {
      overflow: hidden;
    }
    
    .filterDiv {
      float: left;
      background-color: #2196F3;
      color: #ffffff;
      width: 100px;
      line-height: 100px;
      text-align: center;
      margin: 2px;
      display: none;
    }
    
    .show {
      display: block;
    }
    
    .btn {
      border: none;
      outline: none;
      padding: 12px 16px;
      background-color: #f1f1f1;
      cursor: pointer;
    }
    
    .btn:hover {
      background-color: #ddd;
    }
    
    .btn.active {
      background-color: #666;
      color: white;
    }
    

  <div id="myBtnContainer">
      <button class="btn active" onclick="filterSelection('all')"> Show all</button>
      <button class="btn" onclick="filterSelection('cars')"> Cars</button>
      <button class="btn" onclick="filterSelection('animals')"> Animals</button>
    </div>
    
    <div class="container">
      <div class="filterDiv cars">BMW</div>
      <div class="filterDiv cars">Volvo</div>
      <div class="filterDiv animals">Cat</div>
      <div class="filterDiv animals">Dog</div>
    </div>
    
   
   

Но если я изменю одно из делений, например, с

  <div class="filterDiv animals">Dog</div>

на

 <div class="filterDiv animals" id="othercss_unrelated_to_function" >Dog</div>

Это полностью нарушает функцию. Как я могу заставить его расставить приоритеты для класса CSS?

Я бы хотел, чтобы функция работала вокруг идентификатора CSS. Есть ли способ упорядочить их в иерархию, чтобы они не мешали моим JavaScript?

Answer 1

Идентификаторы имеют приоритет 100. Классы имеют приоритет 10.

Таким образом, идентификаторы всегда будут иметь приоритет над классами, независимо от их расположения в коде.

Хитрость заключается в том, чтобы объедините идентификатор и класс в вашем CSS, который дает приоритет 110:

#othercss_unrelated_to_function.filterDiv {...}