Question

我有正常运行的代码，但是我敢肯定有一种写得更干净的方法。

我的代码远不是我认为的最佳实践。不要重复自己的原则。

我尝试寻找此问题，但找不到答案。

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

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

我也想知道，是否有办法让我不必在每个元素上使用特定的id和classname？我只能使用类“ more-wrapper”并跳过ID吗？

Answer 1

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

要使其正常运行，您必须：

用一个类将所有按钮/内容组包装到包装div中
更改CSS，使其在包装类上起作用
将click事件处理程序添加到类的每个元素
使用事件获取最近的包装器
现在您可以更改其类别

// 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>

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

类列表可切换多个元素

2 个答案: