我想通过为“querySelectorAll”提供“单击”操作来为另一个元素提供“样式”

Question

通过“querySelectorAll”选择了几个“按钮”，它们的类是相同的，通过单击其中一个，我想向名为“basket”的类添加“样式”。但是因为我以前从来没有这样做过，所以我做不到，我不知道该怎么做，这是我写的代码。

let basket = document.querySelectorAll(".basket")
document.querySelectorAll('.pBasket').forEach(item => {
  item.addEventListener('click', event => {
    basket.style.display = "block"
  })
})

.basket {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  display: none;
}

<div class="smra smallRaditation">
  <h5>130 000 so`m</h5>
  <hr>
  <div class="colBox">
    <h3>Ventilatsiya</h3>
    <div class="rowBox">
      <button class="pBtn pBasket">Savatga</button>
    </div>
  </div>
</div>


<div class="basket">

</div>

let basket = document.querySelectorAll(".basket")
document.querySelectorAll('.pBasket').forEach(item => {
  item.addEventListener('click', event => {
  basket.style.display = "block"
  })
})

Answer 1

您似乎正在尝试使用类篮子定位一个元素，但您的 HTML 中没有这样的元素。因此，当您使用 querySelectorAll(".basket") 时，您选择的是一个不存在的集合，这会导致在尝试应用样式时出现问题。

要解决此问题：

1.首先，确保 HTML 中确实有一个带有类篮子的元素。例如：

<div class="basket">
  <!-- Your basket content here -->
</div>

2.一旦你有了篮子元素，你就可以使用querySelector()来选择它，然后修改它的显示属性，如下所示：

let basket = document.querySelector(".basket"); // Selects the basket element
document.querySelectorAll('.pBasket').forEach(item => {
  item.addEventListener('click', event => {
    basket.style.display = "block"; // Show the basket on button click
  });
});

这将起作用，因为现在 .basket 元素存在于 DOM 中，并且当单击任何带有 .pBasket 类的按钮时，您可以正确选择它来修改其样式。