通过循环显示所有div并显示我想要显示的特定div

Question

我正在使用Javascrip，我有一个像下面这样的函数，我想隐藏所有div。但我不知道为什么这段代码不起作用。有人会帮我这个吗？

Javasvript

 function showDiv(divTag,id)
    {
     var i;
      for(i=1;i<7;i++)
     {
       document.getElementById(divTag+i).style.display = 'none';
     }
      document.getElementById(divTag+id).style.display = 'block';
    }

或

function showDiv(divTag,id)
{
  var i;
  for(i=1;i<5;i++)
 {
   var tempDiv = divTag + i;
   document.getElementById(tempDiv).style.display = 'none';
 }
document.getElementById(divTag+id).style.display = 'block';
}

和HTML

 <a href="#" onClick="showDiv(\"hide_\",1)">Show Only Div1</a>
    <div id="hide_1">
    Abc
    </div>
     <a href="#" onClick="showDiv(\"hide_\",2)">Show Only Div2</a>

    <div id="hide_2">
    BCD
    </div>
<a href="#" onClick="showDiv(\"hide_\",3)">Show Only Div2</a>

    <div id="hide_3">
    EDF
    </div>
<a href="#" onClick="showDiv(\"hide_\",4)">Show Only Div2</a>

    <div id="hide_4">
    FGE
    </div>

我尝试过的两个abov过程都没有做到

Answer 1

有几件事：

1. "onclick"（不是"onClick"）是在html和JavaScript中分配点击事件处理程序的正确方法。
2. 您正在第一个函数的for(i=1;i<7;i++)行中从1循环到6，但您的html中只有4个元素。当达到不存在的第五个时 - 您的代码将抛出错误。类似于“TypeError：无法读取属性'样式'的null”。
3. 正如@verisimilitude所提到的，你的html中有一个语法错误，你将引用的文本放在另一个以相同方式引用的文本中。它应该是onclick="showDiv('hide_',1)"。请注意'hide _'周围的单引号。

这是有效的代码。的 Click here to see it in action

这是您的JavaScript功能：

// Please note that it must be in the global scope
// otherwise you won't be able to call it from your html.

function showDiv(divTag, id) {
  var i;
  for (i = 1; i < 5; i++) {
    var tempDiv = divTag + i;
    document.getElementById(tempDiv).style.display = 'none';
  }
  document.getElementById(divTag+id).style.display = 'block';
}

另外，请先查看 another working version of your code ，然后在隐藏/显示元素之前预先验证元素是否存在。因此，您不必担心您的for循环迭代已删除的元素。

这是你的HTML：

<a href="#" onclick="showDiv('hide_', 1);">Show Only Div1</a>
<div id="hide_1">Div1</div>

<a href="#" onclick="showDiv('hide_', 2);">Show Only Div2</a>
<div id="hide_2">Div2</div>

<a href="#" onclick="showDiv('hide_', 3);">Show Only Div3</a>
<div id="hide_3">Div3</div>

<a href="#" onclick="showDiv('hide_', 4);">Show Only Div4</a>
<div id="hide_4">Div4</div>​

Answer 2

<a href="#" onClick="showDiv("hide_",1)">Show Only Div1</a> 

产生javascript语法错误。这应该是

<a href="#" onClick="showDiv('hide_',1)">Show Only Div1</a>  

检查“hide _”

周围的单引号