对这个javascript函数进行了小的调整

Minor tweak to this javascript function?

本文关键字：调整 javascript 函数      更新时间：2023-09-26

我有一个脚本，显示/隐藏通过onClick使用的脚本。我可以让它显示/隐藏得很好，但我无法让它显示/"隐藏其他所有内容"。所以我得到的是一堆打开的容器，而我真的只想要一个。

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>

谢谢

既然你已经用jQuery标记了这个，我假设这是一个选项：

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

编辑：这是您要做的吗：http://jsfiddle.net/Rykus0/67cjt/2/（没有jQuery）

（PS - 这可以做得更好）

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

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

另外，我认为您应该将 hidden3 上的onclick调用更改为showfields('hidden4')并从 hidden4 中删除 onclick 事件

我同意Porco的观点，

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

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

不使用 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>
相关文章：