Question

我正在努力完全掌握如何使JavaScript干燥。

现在，我为每个id命名，并添加一个数字以使其唯一，然后重复相同的代码，只是替换id。太糟糕了。

我想厌倦Vanilla JS而不是jQuery。我试图理解this，但发现很难理解如何在代码示例中使用它。

我希望社区能够为我理解非DRY时可以理解的这个基本示例提供帮助，因此在DRY变得更好时也可以遵循。

谢谢！

const content1 = document.getElementById("content1")
const trigger1 = document.getElementById("trigger1")

trigger1.addEventListener("click", () => {
  if(content1.getAttribute("data-toggle") === "closed") {
    content1.setAttribute("data-toggle", "open")
    content1.classList.remove("hide")
  } else {
    content1.setAttribute("data-toggle", "closed")
    content1.classList.add("hide")  
  }
})

const content2 = document.getElementById("content2")
const trigger2 = document.getElementById("trigger2")

trigger2.addEventListener("click", () => {
  if(content2.getAttribute("data-toggle") === "closed") {
    content2.setAttribute("data-toggle", "open")
    content2.classList.remove("hide")
  } else {
    content2.setAttribute("data-toggle", "closed")
    content2.classList.add("hide")  
  }
})


const content3 = document.getElementById("content3")
const trigger3 = document.getElementById("trigger3")

trigger3.addEventListener("click", () => {
  if(content3.getAttribute("data-toggle") === "closed") {
    content3.setAttribute("data-toggle", "open")
    content3.classList.remove("hide")
  } else {
    content3.setAttribute("data-toggle", "closed")
    content3.classList.add("hide")  
  }
})

.hide {
 display:none;
}

.open {
  padding: 8px;
  background-color:blue;
  margin: 20px;
}

<div class="open" id="trigger1">
  Open 1
</div>

<div class="content-1 hide" id="content1" data-toggle="closed">
  Content 1
</div>

<div class="open" id="trigger2">
  Open 2
</div>


<div class="content-2 hide" id="content2" data-toggle="closed">
  Content 2
</div>

<div class="open" id="trigger3">
  Open 3
</div>


<div class="content-3 hide" id="content3" data-toggle="closed">
  Content 3
</div>

Answer 1

只需使用data属性来定位要切换和循环以添加事件监听器的对象即可。

document.querySelectorAll('[data-toggles]').forEach(function(elem) {
  elem.addEventListener('click', function() {
    var id = this.dataset.toggles;
    document.getElementById(id).classList.toggle('hidden')
  })
})

.hidden {
  display: none;
}

<div data-toggles="content1">
  Open 1
</div>

<div class="hidden" id="content1">
  Content 1
</div>


<div data-toggles="content2">
  Open 2
</div>

<div class="hidden" id="content2">
  Content 2
</div>

您还可以使用事件委托来添加一个处理程序，但是在这种情况下，这并不十分有益。

Answer 2

如何遍历您的ID？

var ids = [1, 2, 3];
ids.forEach(function(contentId) {
    var content = document.getElementById("content" + contentId);
    var trigger = document.getElementById("trigger" + contentId);
    trigger.addEventListener("click", () => {
        if(content.getAttribute("data-toggle") === "closed") {
            content.setAttribute("data-toggle", "open");
            content.classList.remove("hide");
        } else {
            content.setAttribute("data-toggle", "closed");
            content.classList.add("hide");
        }
    });
});

保持干燥的最佳做法

2 个答案: