多个元素上的类列表切换

Question

我有可用的代码，但我确信有一种方法可以使代码更清晰。

我的代码与我假设的最佳实践相去甚远。不要重复自己的原则。

我试图寻找这个问题，但找不到答案。

这是预期结果和我当前的代码： https://jsfiddle.net/9ednsp6x/

document.getElementById("BtnMoreTotalt").onclick = function() {MoreBtnTotalt()};
function MoreBtnTotalt() {
    document.querySelector(".more-wrapper-totalt").classList.toggle("show");
}

我也想知道，是否有办法让我不必在每个元素上使用特定的 id 和 classnames？我可以只使用 class "more-wrapper" 并跳过 ID 吗？

Answer 1

这里有一个带有可重复使用的按钮单击处理程序的示例。

要让它发挥作用，您必须：

用 class
更改 CSS 使其适用于包装器 class
将点击事件处理程序添加到 class
使用事件获取最近的包装器
现在您可以更改它的 class

// Query through all "a" elements that are inside a ".wrapper" element
document.querySelectorAll(".wrapper > a").forEach(b => {
  // Add a click handler to each
  b.onclick = (e) => {
    // prevent the default action of an "a" element
    e.preventDefault();

    // get the closest wrapper from the event
    let button = e.target;
    let wrapper = button.closest(".wrapper");

    // now change the class
    wrapper.classList.toggle("show");
  };
});

.wrapper > div {
  visibility:hidden;
}
.wrapper.show > div {
  visibility:visible
};

<div class="wrapper">
  <div>test1</div>
  <a href="#">Mer info</a>
</div>

<div class="wrapper">
  <div>test2</div>
  <a href="#">Mer info</a>
</div>

<div class="wrapper">
  <div>test3</div>
  <a href="#">Mer info</a>
</div>

<div class="wrapper">
  <div>test4</div>
  <a href="#">Mer info</a>
</div>

Answer 2

document.querySelectorAll(".more-button").forEach(element => {
  element.onclick = (e) => {
    const elm = document.getElementsByClassName(e.target.getAttribute("anchor"));
    elm[0].classList.toggle("show");
  };
});

.more-wrapper {
  visibility:hidden;
}
.more-wrapper.show {visibility:visible};

<div class="more-wrapper more-wrapper-totalt">
  <div>test1</div>
</div>
<a href="#" onClick="return false;">
  <div anchor="more-wrapper-totalt" class="more-button">Mer info</div>
</a>

<div class="more-wrapper more-wrapper-kvant">
  <div>test2</div>
</div>
<a href="#" onClick="return false;">
  <div anchor="more-wrapper-kvant" class="more-button">Mer info</div>
</a>

<div class="more-wrapper more-wrapper-invb">
  <div>test3</div>
</div>
<a href="#" onClick="return false;">
  <div anchor="more-wrapper-invb" class="more-button">Mer info</div>
</a>

<div class="more-wrapper more-wrapper-barn">
  <div>test4</div>
</div>
<a href="#" onClick="return false;">
  <div anchor="more-wrapper-barn" class="more-button">Mer info</div>
</a>

您可以在使用此属性单击事件后添加带有属性的 className 按钮。这就像克隆，但我认为你需要这个 class 另一个地方。

多个元素上的类列表切换

Classlist toggle on multiple elements

javascript

dry