使用OnClick功能隐藏DIV-寻找一种更清洁的方法来达到相同的结果

Question

首先，如果可以易于搜索，我想道歉；我是JavaScript的新手，我不知道要搜索什么(因此为什么要在这里问！(

基本上，我有一些代码，可以根据用户点击的NAV按钮显示/隐藏DIVS，从而消除了对HTML多个页面的需求。我在JS中有一个有效的解决方案，但我的问题是，它似乎太块状且不必要地复杂了。

我知道他们在某个地方有一个更优雅的解决方案。但是，我所看的所有内容都只涉及当您按下一个按钮而不是多个按钮时，hid/显示divs，就像nav bar一样。

所以，如果您可以指出一些不同的研究途径，我将不胜感激！

JS：

function hideContent1(){
    var a = document.getElementById("zero");
    var b = document.getElementById("one");
    var c = document.getElementById("two");
    var d = document.getElementById("threeA");
    var e = document.getElementById("threeB");

    if(a.style.display = "none"){
        document.getElementById('zero').style.display = "block";
    }
    if(b.style.display = "none"){
        document.getElementById('one').style.display = "block";
    }
    if(c.style.display = "block"){
        document.getElementById('two').style.display = "none";
    }
    if(d.style.display = "block"){
        document.getElementById('threeA').style.display = "none";
    }
    if(e.style.display = "block"){
        document.getElementById('threeB').style.display = "none";
    }
}

对于可以按下的三个不同的导航按钮，这重复了三次，略有不同。

就像我之前说过的那样，此代码效果很好，它只是不必要的笨重。完成此任务的更好方法是什么？

Answer 1

假设if s内的作业只是错别字，并且假设样式在none和block之间切换，则可以简单地分配block或none样式 - 如果不分配 - 如果没有 - 改变现有样式，什么都不会发生。

您可以考虑使用类，以使代码不再重复 - 例如，给a和b一类content2，并给其余的content1类。然后，在hideContent1()上，隐藏每个content1，同时显示所有content2：

function hideContent1(){
  document.querySelectorAll('.content2')
    .forEach(elm => elm.style.display = 'block');
  document.querySelectorAll('.content1')
    .forEach(elm => elm.style.display = 'none');
}

请注意，NodeList.prototype.forEach是一种有点新的方法，因此，如果要支持较旧的浏览器，请在调用forEach。

使用组合的ID选择器，然后使用querySelectorAll获取所有元素，最后迭代并执行相同的操作。尽管if语句不是必需的，因为您只是在切换它们，以防其已经可见并且设置block没有任何更改。在您当前的代码中，这将始终是正确的，因为它是一个分配(=(，并且值是一个非空字符串，这是真实的。

有关基于CSS选择器的元素，您可以使用querySelectorAll方法并在返回的Nodelist Collection上迭代使用NodeList#forEach方法(较旧浏览器的Polyfill(。

function hideContent1() {
  // get elements to show
  var show = document.querySelectorAll('#zero,#one')
  // get elements to hide
  var hide = document.querySelectorAll('#two,#threeA,#threeB');
  // iterate and update
  show.forEach(ele => ele.style.display = 'block')
  hide.forEach(ele => ele.style.display = 'none')
}

fyi：用于分组多个元素，您可以使用通常比组合多个选择器更好的公共类。

如何使其作为功能？

例如：

function switchDisplay(source, target) {
    if (source.style.display === 'none')  {
        target.style.display = 'block'
    }
    if (source.style.display === 'block') {
        target.style.display = 'none'
    }
}

假设该功能是您真正想要拥有的功能。除了评论中提到的错字外。