通过“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"
})
})
您似乎正在尝试使用类篮子定位一个元素,但您的 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 类的按钮时,您可以正确选择它来修改其样式。