Question

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

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 so chage options

    <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() (see Article on 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

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

Answer 4

你的html中不能有更多具有相同id的元素！这可以很容易地通过将所有内容放入包装元素并隐藏它，或使用类和选择器（如jQuery中的类$('.myclass').hide();

Answer 5

您无法可靠地重复使用id。

相反，请使用class名称，或按标记名称获取div元素。

document.getElementsByClassName("item");

document.getElementsByTagName("div");

同时显示/隐藏多个DIV

5 个答案: