javascript - 为什么我的 javascript 添加类将图像显示设置为无时不起作用？

Question

这是我的 html 代码:

<div class="container-fluid instructions">
    <img src="chick2.png">
    <img class="img1" src="dice6.png">
    <img class="img2" src="dice6.png">
    <img class="img3 threeChoices" src="dice6.png">
    <img class="img4 fourChoices" src="dice6.png">
    <img src="chick1.png">
  </div>
<div class="dropdown">
      <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        2
        <span class="caret"></span>
      </button>
      <ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
      </ul>
      <input type="text" name="" value="" placeholder="Choice 1"> <br>
    </div>

这是我的 JavaScript:

let links = document.querySelectorAll('#list li')
links.forEach((el) => {
  el.addEventListener('click', (event) => {
    let numberOfChoices = event.target.innerText
    document.getElementById('dropdownMenu1').innerHTML = `${numberOfChoices}<span class="caret"></span>`
    console.log(numberOfChoices)

    // Showing Correct Number of Boxes
    if (numberOfChoices === 2) {
      document.querySelectorAll(".img3").classList.add(".invisible");
    }
  })
})

这是CSS:

.invisible{display: none;}

如果在下拉按钮上选择 2，我希望类为 img3 的图像消失。为什么它不起作用，有人可以帮忙吗？请提前致谢

Answer 1

通过查看您的代码，我发现您存在三个问题，导致在添加类时无法隐藏图像。

首先是您比较 string与 int ，儿子，这是你需要做的第一个改变。

其次，您调用 querySelectorAll(".img3")这会阻止您获得 classList执行之前的属性 forEach()的结果，所以你需要将其更改为 querySelector(".img3") .

最后一个问题是您添加 .invisible类看起来像 <div class=".invisible">你应该只添加类的名称 invisible .

以下是修复后的代码:

let links = document.querySelectorAll('#list li')
links.forEach((el) => {
  el.addEventListener('click', (event) => {
    let numberOfChoices = event.target.innerText
    document.getElementById('dropdownMenu1').innerHTML = `${numberOfChoices}<span class="caret"></span>`
    console.log(numberOfChoices)

    // Showing Correct Number of Boxes
    if (numberOfChoices === "2") { // <------- fix 1
      var element = document.querySelector(".img3"); // <------ Fix 2
      element.classList.add("invisible"); // <------ Fix 3
    }
  })
})

.invisible {
  display: none;
}

<div class="container-fluid instructions">
  <img src="chick2.png">
  <img class="img1" src="dice6.png">
  <img class="img2" src="dice6.png">
  <img class="img3 threeChoices" src="dice6.png">
  <img class="img4 fourChoices" src="dice6.png">
  <img src="chick1.png">
</div>
<div class="dropdown">
  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        2
        <span class="caret"></span>
      </button>
  <ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>
  <input type="text" name="" value="" placeholder="Choice 1"> <br>
</div>

-------------------- JQUERY 更新 ------------------------

如果您想使用 JQuery 并将代码再捆绑一点，这里是您需要对代码进行的更改。在此代码中，您首先需要将 JQuery 作为脚本添加到您的代码中，无论是从云端提取 js 还是下载最新版本。

一旦 JQuery 开始工作，我们就需要改变使用 document.querySelector('selector') 获取元素的方式。至$('selector') ，这是 JQuery 处理元素选择的方式。

由于 JQuery 不区分获取一个元素和所有元素的方式，因此代码的工作方式有所不同。如果它找到多个元素，它将作为数组处理返回，您可以直接使用该数组，而无需调用 forEach或each 。这是第二个更改。

最后一项更改是您在评论中建议的更改。为了能够选择具有不同类或 id 的各种元素，只需使用 ,选择器内的分隔符，然后是 addClass方法。

$(document).on('click', '#list li', function(event) {
  let numberOfChoices = event.target.innerText
  $('#dropdownMenu1').html(numberOfChoices + "<span class='caret'></span>")
  console.log(numberOfChoices);

  // Showing Correct Number of Boxes
  if (numberOfChoices === "2") {
    $(".img3, .img4").addClass("invisible");
  }
})

.invisible {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- IMPORTANT here you add jquery from the cloud -->
<div class="container-fluid instructions">
  <img src="chick2.png">
  <img class="img1" src="dice6.png">
  <img class="img2" src="dice6.png">
  <img class="img3 threeChoices" src="dice6.png">
  <img class="img4 fourChoices" src="dice6.png">
  <img src="chick1.png">
</div>
<div class="dropdown">
  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        2
        <span class="caret"></span>
      </button>
  <ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>
  <input type="text" name="" value="" placeholder="Choice 1"> <br>
</div>