Question

首先，如果此内容易于搜索，我要道歉；我对JavaScript相当陌生，我也不知道要搜索什么（因此我为什么要在这里问！）

基本上，我有一些代码可以根据用户单击的导航按钮显示/隐藏div，从而无需使用多个HTML页面。我在JS中有一个可行的解决方案，但是我的问题是，它似乎太块状且不必要地复杂。

我知道他们是某个地方更优雅的解决方案。但是，当您按下一个按钮时，我查看的所有内容仅能显示隐藏/显示div，而导航栏则不会显示多个。

因此，如果您能指出几种不同的研究途径，我将不胜感激！

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";
    }

}

对于可以按下的三个不同的导航按钮，此操作重复3次，但IF语句略有不同。

就像我之前说过的那样，这段代码可以正常工作，只是不必要的庞大。什么是完成此任务的更好方法？

Answer 1

使用组合的id选择器，然后使用querySelectorAll获取所有元素，最后进行迭代并执行相同的操作。尽管if语句不是必需的，因为您只是在它们已经可见的情况下切换它们，并且设置block不会进行任何更改。在您当前的代码中，由于它是一个赋值（=），并且值是一个非空字符串，该字符串将为truthy，因此它将始终为真。

要获取基于CSS选择器的元素，可以使用querySelectorAll方法，并使用NodeList方法（NodeList#forEach）对返回的polyfill for older browser集合进行迭代。

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：要对多个元素进行分组，可以使用一个公共类，该类总是比组合多个选择器更好。

Answer 2

假设if内的分配只是拼写错误，并且假定样式在none和block之间切换，则可以简单地分配block或{ {1}}样式-无论是否更改现有样式，都不会发生。

您可以考虑改用类，以减少重复性，例如，给none和a一个b类，给其余的{{1 }}。然后，在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'); }之前使用polyfill或将NodeList转换为数组。

Answer 3

如何使其成为功能？

例如：

void f(int x)
{
   if (x > x + 1) 
       // executed only in case of overflow,
       // which is undefined behavior, 
       // and hence likely optimized out.
       overflow_error();
   ...

假设功能是您真正想要的功能，除了注释中提到的错字。

隐藏具有onclick功能的DIV-寻找更干净的方法来获得相同的结果

3 个答案: