Question

同时显示/隐藏多个 DIV

2012-03-19

1974

javascript onclick show-hide

我想让用户看到文章内容或仅查看列表。但是当我尝试这样做时，它只隐藏了第一个实例：

HTML

    <div id="title">Title</div>
    <div id="articlebody">Blah blah blah</div>
    <div id="title">Title 2</div>
    <div id="articlebody">2. Blah blah blah</div>
    <div id="title">Title 3</div>
    <div id="articlebody">3. Blah blah blah</div>
    ... And so on for 10 articles

Javascript 更改选项

    <a href="#" onClick="document.getElementById('articlebody').style.display='none';">View title list only</a>
    <a href="#" onClick="document.getElementById('articlebody').style.display='block';">View the whole body</a>

正如我所说，代码将隐藏文章正文 1，但不会隐藏其余部分。

Answer 1

您的 html 存在一些大问题：

首先： id 属性在整个文档中必须是唯一的。因此， getElementById 仅返回一个值（在文档中找到的第一个元素）。

改用 class 和相应的选择器

getElementsByClassName

第二：在 onclick 中使用外部函数。

<a onClick="yourfunction()">...</a>

并在脚本块中：

function yourfunction(){
   var el = document.getElementsByClassName(<yourclassname>);
   for (var i = 0; i < el.length; i++){
         el[i].style.display='none';
   }
}

编辑：出于兼容性原因，您应该使用 querySelector() 或 querySelectorAll() （参见 MDN 上的文章），因为它受 IE8+ 支持，而IE8 不支持 getElementsByClassName 。此外，它更接近 jQuery 语法，因此大多数 webdev 人员都更熟悉它；）。

Answer 2

您不能拥有 2 个或多个具有相同 ID 的元素，这是无效的 HTML。

我的建议是将这些更改为类并使用 jQuery 来隐藏/显示：

<div class="title">Title</div>
<div class="articlebody">Blah blah blah</div>
<div class="title">Title 2</div>
<div class="articlebody">2. Blah blah blah</div>
<div class="title">Title 3</div>
<div class="articlebody">3. Blah blah blah</div>

<a href="#" onClick="$('.articlebody').hide(); return false;">View title list only</a>
<a href="#" onClick="$('.articlebody').show(); return false;">View the whole body</a>

更简洁的方法是创建一个事件监听器，这意味着您可以删除 onClick 属性：

<div class="title">Title</div>
<div class="articlebody">Blah blah blah</div>
<div class="title">Title 2</div>
<div class="articlebody">2. Blah blah blah</div>
<div class="title">Title 3</div>
<div class="articlebody">3. Blah blah blah</div>

<a href="#" class="viewTitleListOnly">View title list only</a>
<a href="#" class="viewWholeBody">View the whole body</a>

<script type="text/javascript">
    $(function(){
        $(".viewTitleListOnly").click(function(e){
           e.preventDefault(); //Prevents browser adding hash tag to URL
           $(".articlebody").hide();
        });
        $(".viewWholeBody").click(function(e){
           e.preventDefault(); //Prevents browser adding hash tag to URL
           $(".articlebody").show();
        });
    });
</script>

Answer 3

ID 不适用于多个实例，您需要使用一个类来隐藏它们全部或设置单独的 ID 并分别隐藏它们

CKKiller

2012-03-19