如何将类映射到之前为HTMLcollection的数组

Question

单击时，如果with #CNC_Mach_btn包含.active类，则其中包含.CNC_Machinery类的标记应接收.show类，此部分起作用。

但是我也想删除没有.CNC_Machinery类的标记上的.show类。

我将NodeLists更改为数组，然后遍历tehm，然后附加.s

我尝试了JS的想法"else if (!CNC_Mach_btn.classList.contains("active")) {“！来自here，但这并不起作用。

HTML和PHP：

JS：

      //gets all category buttons
      // this returns a !!!nodeList!!!!
      let category_btn = document.querySelectorAll('.category-button');
      // gets the button with #CNC_Machining_button for click EventListener
      // this returns a !!!HTMLCollection!!!!
      let CNC_Mach_btn = document.getElementById("CNC_Machining_button");
      //gets anchor tags where the .images class is (all <a> have an image class)
      // this returns a !!!nodeList!!!!

      let Images_Class_In_Anchor_Tag = document.querySelectorAll('.images');
      //transforming nodeList into an array
      const All_Images_Class_MakeArray = Array.from(Images_Class_In_Anchor_Tag);
      //gets .CNC_Machinery classes from anchor tags where also .images class is located
      // this returns a !!!NodeList!!!!
      let CNC_Machining_Class_In_AnchorTag = document.querySelectorAll(".CNC_Machinery");
      //transforming nodeList into an array
      const CNC_Machining_Class_MakeArray = Array.from(CNC_Machining_Class_In_AnchorTag);



    CNC_Mach_btn.addEventListener("click", function() {

       if (CNC_Mach_btn.classList.contains("active")) {
        CNC_Machining_Class_MakeArray.forEach(el => el.classList.add("show"));  
        if (!All_Images_Class_MakeArray.forEach(el => el.classList.contains("CNC_Machinery"))) {
        CNC_Machining_Class_MakeArray.forEach(el => el.classList.remove("show"));
        }
      }
    });

HTML和PHP：

<section class="gallery-links">
<div class="wrapper">
  <h2 class="product-gallery-title">Product Gallery</h2>

  <div class="gallery-container">
    <?php
    include_once 'includes/dbh.inc.php';

    $sql = 'SELECT * FROM gallery ORDER BY orderGallery DESC';
    $stmt = mysqli_stmt_init($conn);
    if (!mysqli_stmt_prepare($stmt,$sql)) {
      echo 'SQL statement failed!';
    } else {
      mysqli_stmt_execute($stmt);
      $result = mysqli_stmt_get_result($stmt);

      while ($row = mysqli_fetch_assoc($result)) {
        //what's echoed out by the database

        echo '  <a class="images '.$row["image_category"].'" style="background-repeat:no-repeat; background-image: url(gallery/'.$row["imgFullNameGallery"].')">
                <div class="color-overlay">
                <h3>'.$row["titleGallery"].'</h3>
                <p>'.$row["descGallery"].'</p>
                </div>
                </a>';
      }
    }


    ?>  

  </div>

预期结果:应将.show添加到包含.CNC_Machinery的锚定标记中

实际结果:不向包含.CNC_Machinery的锚定标签添加和移除.show

Answer 1

您的脚本实际上基本上是正确的，但有一个例外:您正在尝试访问节点数组的.classList，这是不起作用的。相反，您只需遍历节点数组，然后访问每个节点的classList：

CNC_Mach_btn.addEventListener("click", function() {
  if (CNC_Mach_btn.classList.contains("active")) {
    CNC_Machining_Class_MakeArray.forEach(function(el) {
      el.classList.add("show");
    });
  }
});

更新:由于您使用的是ES6，因此您还可以使用箭头函数来使您的代码更简洁：

CNC_Mach_btn.addEventListener("click", () => {
  if (CNC_Mach_btn.classList.contains("active")) {
    CNC_Machining_Class_MakeArray.forEach(el => el.classList.add("show"));
  } 
});

Answer 2

在使用类CNC_Machinery获取所有元素之后，可以使用NodeList的forEach方法

​

document.querySelectorAll('.CNC_Machinery').forEach(e => {
  e.classList.add('show');
});

.show {
  background: red;
}

<div class="CNC_Machinery">Div 1</div>
<div>Div 2</div>
<p class="CNC_Machinery">P 1</p>

​