如何用同一个按钮切换两个元素（没有JQuery）

Question

我有一个购物车项目按钮。如果开关打开，背景为绿色，如果关闭，背景为红色。我想在按钮的同时在父 class 之间切换。因此，如果按钮为绿色，则整个列表都有一个新的 class，稍后我需要显示购物清单中的所有项目。我不需要存储任何数据，只是给出网上商店的想法。它就像一个复选框，但我必须使用按钮。（我使用过滤器的复选框，但为此，需要一个按钮）。我不允许使用 JQuery.

这是我的 HTML 列表，需要使用列表中的按钮更改 class：

<li data-type="speelgoed" data-wissel="" class="product" id="product1">
    <button class="material-icons" data-cart-toggle="1">&#xe8cc;</button>
    <figure><img src="/image/speelgoed/annaPop.png" alt="pop Anna"></figure>
    <h3><strong>Anna pop &#124; &euro;14.50 </strong></h3>
    <p>Leuke pop om mee te spelen. Haar en kleding kan aangepast worden.</p>
</li>

到目前为止，这是我的 javascript，这适用于按钮：

document.addEventListener("click", handle);

function handle(evt) {
    const buyMe = evt.target;

    if(buyMe.dataset.cartToggle) {
        buyMe.classList.toggle("addedInCart");
    }
}

感谢您的宝贵时间！

Answer 1

您可以通过 parentNode 访问 javascript 中的父元素，对于您的情况：

function handle(evt) {
    const buyMe = evt.target;

    const container = buyMe.parentNode; // li

    if(buyMe.dataset.cartToggle) {
        buyMe.classList.toggle("addedInCart");
    }
}

Answer 2

使用 [element].closest 检索父 li 元素。示例（荷兰语 ;）：

document.addEventListener("click", handle);

function handle(evt) {
  const buyMe = evt.target;

  if (buyMe.dataset.cartToggle) {
    buyMe.closest("li").classList.toggle("addedInCart");
    //    ^ find first parent li
  }
}

li.product button:after {
  content: "In winkelwagen";
}

li.addedInCart button {
  color: green;
}

li.addedInCart button:after {
  content: "verwijder uit winkelwagen";
}

<ul>
  <li data-type="speelgoed" data-wissel="" class="product" id="product1">
    <button class="material-icons" data-cart-toggle="1"></button>
    <!-- Note: img is random -->
    <figure><img src="https://picsum.photos/200/100" alt="pop Anna"></figure>
    <h3><strong>Anna pop &#124; &euro;14.50 </strong></h3>
    <p>Leuke pop om mee te spelen. Haar en kleding kan aangepast worden.</p>
  </li>
</ul>

如何用同一个按钮切换两个元素（没有JQuery）

How to toggle two elements with the same button (no JQuery)

html

javascript

button

toggle