Question

如果元素包含.CNC_Machinery类，我想将.show类添加到元素中。

出于某种原因，这不起作用。当我尝试在代码中使用变量“ CNC_Machining_Class_In_AnchorTag”时，控制台返回ReferenceError，但是当我console.log（CNC_Machining_Class_In_AnchorTag）;我在控制台中得到了正确的响应。

请参见贝娄：代码的第一部分将.active类应用于单击的按钮。

代码的第二部分应将.show应用于单击的按钮。

我尝试将变量“ CNC_Machining_Class_In_AnchorTag”放入函数内部，并从那里放入console.log（），但是当我尝试这样做时。甚至没有console.log（）;

唯一有效的方法是删除代码的第一部分。然后我得到适当的反应。可能是元素/对象上有两个单击事件吗？如果是这种情况，我该怎么解决？

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>

JS代码的第一部分：

// The button which would be used to add 'active' class to
    // all the buttons.
    let allButton = document.querySelector('#All');

    let btns = Array.from(document.querySelectorAll('.category-button'));
    let activeButton = null;

    const handleClick = (e) => {
      e.preventDefault();
      e.currentTarget.classList.add('active');
      // Checks that the activeButton is defined (initially it's null).
      // Also checks that the button that was clicked is not the button which is
      // already active to avoid removing the active class on double click.
      if (activeButton != null && activeButton != e.currentTarget) {
        activeButton.classList.remove('active');
      }
      activeButton = e.currentTarget;
    }

    btns.forEach(node => {
      node.addEventListener('click', handleClick)
    });

    // Listen to a click event from the "allButton" and when it's clicked,
    // loop through the buttons array and add 'active' class to all buttons
    // in it.
    allButton.addEventListener('click', function() {
        btns.forEach(btn => {
            btn.classList.add('active');
        })
    });

JS代码的第二部分：

      let category_btn = document.getElementsByClassName('category-button');
      console.log(category_btn);

      let CNC_Mach_btn = document.getElementById("CNC_Machining_button");
      let CNC_Machining_Class_In_AnchorTag = document.getElementsByClassName("CNC_Machinery");

      console.log(CNC_Machining_Class_In_AnchorTag) //shows in console

      CNC_Mach_btn.addEventListener("click", function() {
        let CNC_Machining_Class_In_AnchorTag = document.getElementsByClassName("CNC_Machinery");
        console.log(CNC_Machining_Class_In_AnchorTag) // does not show in console
        // if the the CNC_Machining button is active make classes with Images with CNC_Machining active. 
        if (CNC_Mach_btn.classList.contains("active")) {
          CNC_Machining_Class_In_AnchorTag.classList.add("show");
        }
    });

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

实际结果：.show没有添加到包含.CNC_Machinery的锚标记中。

className变量使用console.log（）返回，但是在代码中返回引用错误

0 个答案: