Question

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

单击时，如果带有#CNC_Mach_btn的按钮包含一个.active类，则其中带有.CNC_Machinery类的锚标记应接收一个.show类，这部分起作用。

但是，我也想删除不具有.CNC_Machinery类的锚标记上的.show类。

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

我尝试了JS想法，只是从here添加了一个'！'（！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>

锚标签（包括CNC_Machinery类）的PHP输出。

                <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的锚标记中 .show不会从不包含.CNC_Machinery

的锚标记中添加和删除。

实际结果：JS没有输出。

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

0 个答案: