javascript - 如何检查从NodeList转换的元素数组中是否没有类

Question

正如标题所示，我正在尝试检查数组中是否不存在一个类。

单击时，如果带有 #CNC_Mach_btn 的按钮包含一个 .active 类，那么其中带有 .CNC_Machinery 类的锚标签应该接收一个 .show 类，这部分有效。

但是，我还想删除没有 .CNC_Machinery 类的锚标签上的 .show 类。

我将 NodeLists 更改为数组，然后遍历它们，然后附加 .show

我尝试了 JS 的想法，只是从这里添加一个 '!', (!CNC_Mach_btn.classList.contains("active")) 但这不起作用。

JS：

      let category_btn = document.querySelectorAll('.category-button');
      let CNC_Mach_btn = document.getElementById("CNC_Machining_button");

      let Images_Class_In_Anchor_Tag = document.querySelectorAll('.images');

      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
      let CNC_Machining_Class_In_AnchorTag = document.querySelectorAll(".CNC_Machinery");

      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：

<div id="category-buttons">
    <h5>Choose image category</h5>
      <button id="All" class="category-button active" >All Categories</button>
      <button id="CNC_Machining_button" class="category-button CNC_Mach_btn">CNC_Machining</button>
      <button id="HP_Die_Casting_button" class="category-button HP_Die_btn">HP Die Casting</button>
      <button id="Iron_Casting" class="category-button">Iron Casting</button>
      <button id="Steel_Casting" class="category-button">Steel Casting</button>
      <button id="Precision_Casting" class="category-button">Precision Casting</button>
      <button id="Aluminium_Casting" class="category-button">Aluminum Casting</button>
    </div>


<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>

</div>

锚标记的 DEVTOOLS 中的 PHP 输出，包括 CNC_Machinery 类。

                <a class="images CNC_Machinery show" style="background-repeat:no-repeat; background-image: url(gallery/galvanized_cast_iron.UNIQid5c3720c4502f92.46784406.jpg)">
                <div class="color-overlay">
                <h3>Galvanized_Cast_Iron</h3>
                <p>Image of connector manufactured in Galvanized_Cast_Iron_Way</p>
                </div>
                </a>  <a class="images Sand_Casting" style="background-repeat:no-repeat; background-image: url(gallery/pizza-pie.UNIQid5c372f19564787.51280655.jpg)">
                <div class="color-overlay">
                <h3>Cool pic</h3>
                <p>When workers work</p>
                </div>
                </a>  

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

实际结果：JS没有输出。

标签： javascripthtmlcss