保持干燥的最佳实践

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

循环遍历您的 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");
        }
    });
});

Answer 2

只需使用数据属性来定位您要切换的内容并循环添加事件侦听器。

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>

您也可以使用事件委托来添加一个处理程序，但认为在这种情况下它不是很有用。

保持干燥的最佳实践

Best practice to remain DRY

javascript

dry