使用按钮使降价表格 div 出现和消失。但我在 10 张卡片中有几个按钮

Question

我有问题我有几张卡无线 on 使 div 出现在 .他们都有相同的类别，但只有我的一个按钮在其他卡片上有效，它什么都不做

type here html
<article class="grid-product">
    <div class="grid-items-product">
        <div class="grid-item-product">
            <img src="./images/sucette.jpg" alt="sucette">
        <div class="card-content">
            <button class="control-price" >
                 <i class="fa-sharp fa-solid fa-pen"></i>
            </button>
        <h3>Sucette</h3>
        <span>A partir de <strong id="price-sucette">25 €</strong> </span>
        </div>
        </div>
        <div class="grid-item-product">
            <img src="./images/cannes.jpg" alt="bonbon cannes">
        <div class="card-content">
            <button class="control-price">
                <i class="fa-sharp fa-solid fa-pen"></i>
            </button>
        <h3>Cannes</h3>
        <span>A partir de <strong id="price-cannes">25€</strong> </span>
        </div>
        </div>
        <div class="grid-item-product">
            <img src="./images/ourson.jpg" alt="bonbon oursson">
        <div class="card-content">
        <button class="control-price">
             <i class="fa-sharp fa-solid fa-pen"></i>
        </button>
        <h3>Ourson</h3>
        <span>A partir de <strong id="price-ourson">25€</strong> </span>
        </div>
        </div>
    </div>   
</article>

type here css
.form-reduction-price{
    width: 90%;
    background-color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: auto;
    padding-bottom: 25px;
    
}
.btn-closed{
    display: flex;
    align-self:end;
    border: none;
    font-size:16px;
    background: #fff;
}

type here javascript

let promoFormOpen=document.querySelector(".control-price");
promoFormOpen.addEventListener('click',()=>{ 
    document.querySelector ('.form-reduction-price').style.display="flex"        
    });
let closed=document.querySelector(".btn-closed")
     closed.addEventListener('click',()=>{
         document.querySelector('.form-reduction-price').style.display="none";

我有问题我有几张卡无线 on 使 div 出现在 .他们都有相同的类别，但只有我的一个按钮在其他卡片上有效，它什么都不做

Answer 1

document.querySelector

将返回第一个匹配的元素，您可能正在寻找

querySelectorAll

以识别每个单独的“降价”元素。

因此，您可以选择所有按钮：

let promoFormOpenButtons = document.querySelectorAll(".control-price");

然后将您的事件监听器添加到每个按钮：

promoFormOpenButtons.forEach(btn => {
  btn.addEventListener('click', (e) => {
   // do something
});

完整示例：

let promoFormOpenButtons = document.querySelectorAll(".control-price");

promoFormOpenButtons.forEach(btn => {
  btn.addEventListener('click', (e) => {
    console.log(e.target.parentElement.querySelector('h3').textContent);
  });
});

<article class="grid-product">
  <div class="grid-items-product">
    <div class="grid-item-product">
      <img src="./images/sucette.jpg" alt="sucette">
      <div class="card-content">
        <button class="control-price">
                 <i class="fa-sharp fa-solid fa-pen"></i>
            </button>
        <h3>Sucette</h3>
        <span>A partir de <strong id="price-sucette">25 €</strong> </span>
      </div>
    </div>
    <div class="grid-item-product">
      <img src="./images/cannes.jpg" alt="bonbon cannes">
      <div class="card-content">
        <button class="control-price">
                <i class="fa-sharp fa-solid fa-pen"></i>
            </button>
        <h3>Cannes</h3>
        <span>A partir de <strong id="price-cannes">25€</strong> </span>
      </div>
    </div>
    <div class="grid-item-product">
      <img src="./images/ourson.jpg" alt="bonbon oursson">
      <div class="card-content">
        <button class="control-price">
             <i class="fa-sharp fa-solid fa-pen"></i>
        </button>
        <h3>Ourson</h3>
        <span>A partir de <strong id="price-ourson">25€</strong> </span>
      </div>
    </div>
  </div>
</article>