对此javascript函数进行微调？

我有一个脚本显示/隐藏通过onClick使用。我可以让它显示/隐藏就好，但我无法展示/“隐藏其他所有内容”。所以我得到的是一堆打开的容器，当我真的想要一个。对此javascript函数进行微调？

的Javascript：

<script> 
    function showfields(fields){ 
     if(document.getElementById(fields).style.display=='none'){ 
      document.getElementById(fields).style.display='block'; 
     } 
     else{ 
      document.getElementById(fields).style.display = 'none'; 
     } 
    } 
</script>

HTML：

<div id="hidden" class="steps" style="display: block;"> 
    <div class="section" style="margin-right: 10px;"> 
     <h2>Something</h2> 
    </div> 
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden2');return false;" href="#">Continue</button> 
</div> 
<div id="hidden2" class="steps" style="display: block;"> 
    <div class="section" style="margin-right: 10px;"> 
     <h2>Something2</h2> 
    </div> 
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button> 
</div> 
<div id="hidden3" class="steps" style="display: block;"> 
    <div class="section" style="margin-right: 10px;"> 
     <h2>Something3</h2> 
    </div> 
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button> 
</div> 
<div id="hidden4" class="steps" style="display: block;"> 
    <div class="section" style="margin-right: 10px;"> 
     <h2>Something4</h2> 
    </div> 
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden4');return false;" href="#">Continue</button> 
</div>

感谢

来源

2012-06-05 o_O

你使用jQuery吗？ –

你如何传递/构造'fields'变量？ – Sarfraz

删除了jQuery标记 - 在这个问题中没有jquery –

既然你已经使用jQuery标签这个我认为是一个选项：

function showfields(fields){ 
    $('.steps').hide() 
    $('#' + fields).show(); 
}

来源

2012-06-05 16:32:57 Porco

你还没有看过他的问题 – 2012-06-05 16:34:11

你在说什么？他想隐藏所有其他人，并显示被点击的人，而这正是我的功能所要做的。 – Porco

对不起，我没有看到$（'。steps'）。hide（）但现在我不能删除downvote，直到你编辑这个 – 2012-06-05 16:40:47

编辑： 这是你想要做什么：http://jsfiddle.net/Rykus0/67cjt/2/ （不含jQuery的）

（PS - 这是可以做的更好）

你的问题不是很清楚，但我猜测你希望页面以除隐藏第一个div之外的所有内容开始。

在这种情况下，你所拥有的是好的，只需在你不想显示的元素上设置style="display:none;"（你也可以使用一个类）。

而且，我相信你应该改变hidden3的onclick电话是showfields('hidden4')和hidden4

来源

2012-06-05 16:36:37

这是这个问题的有效解决方案，它完美地工作。这不是答案的唯一原因是我上面的代码被剥离以方便阅读，但隐藏的div之间存在元素，因此呈现nextElementSibling不完全是我需要的。另外，对不起，我的问题并不清楚。 –

由于您提供的解决方案与上述代码完全相同，因此您仍然可以获得upvote。 –

够公平的。我很高兴你找到了你需要的帮助！ –

我红猪同意删除onclick事件，

另一种选择是使用类作为一个标志，例如

function showFields(fields){ 
    $(fields).each(function(){ 
     if($(this).hasClass('visible'){ 
       $(this).hide(); 
     } 
     else { 
       $(this).show(); 
     } 
    } 
}

来源

2012-06-05 16:38:21 HankChizlJaw

没有使用jQuery。这一段JavaScript代码可以帮助你

<script> 
     function showfields(fields){ 
      for(var i=0;i<document.body.getElementsByTagName("*").length;i++) 
      { if(document.body.getElementsByTagName("*")[i].id==field) 
      { 
      document.body.getElementsByTagName("*")[i].style.display='block'; 
      } 
      else{ 
       document.body.getElementsByTagName("*")[i].style.display='block'; 

      } 
     } 
    </script>

来源

2012-06-05 16:39:09

对此javascript函数进行微调？

回答

相关问题