Question

我有以下html结构：

<div id='articles'>
   <div id='unread'>Unread articles</div>
    <div></div>
    <div></div>
   <div id='read'>Read articles</div>
    <div></div>
    <div></div>
</div>

我创建了简单的按钮来根据用户是否想看到读取/未读取来打开/关闭文章。

<div onclick='$("#read").hide();$("#unread").show();'>Show read</div>
<div onclick='$("#unread").hide();$("#read").show();'>Show unread</div>

onclick事件中缺少什么可以选择两个标记ID之间的div？

我不能把关闭标签放在某个类别的最后一篇文章之后，我只能把它作为一个标志。

Answer 1

$("#unread").nextUntil("#read");

This返回其间所有元素的列表。

Answer 2

选择其他两个元素之间的所有元素有点奇怪。

我建议修改HTML结构，看看更像这样的内容：

<div id="articles">
    <h1>Unread articles</h1>
    <div id="unread">
        <div></div>
        <div></div>
    </div>
    <h1>Read articles</h1>
    <div id="read">
        <div></div>
        <div></div>
    </div>
</div>

然后你的按钮将按原样运行。但是，将这些事件内联添加并不是一个好主意。将onclick事件绑定在单独的JS代码块中会更好。这样可以更容易维护。

Answer 3

实现这一目标的一种方法是向子div添加一个类，你要用以下标志显示hide：

<div id='articles'>
   <div id='unread'>Unread articles</div>
    <div class="unreadChild"></div>
    <div class="unreadChild"></div>
   <div id='read'>Read articles</div>
    <div class="readChild"></div>
    <div class="readChild"></div>
</div>

然后：

<div onclick='$("#read").hide();$("#unread").show();$(".unreadChild").show();$(".readChild").hide();'>Show read</div>
<div onclick='$("#unread").hide();$("#read").show();$(".unreadChild").hide();$(".readChild").show();'>Show unread</div>

Answer 4

您的HTML代码：

<div id='articles'>
 <div id='read'>Read articles</div>   
  <div>Read1</div>
  <div>Read2</div>
 <div id='unread'>Unread articles </div>
  <div>Unread1</div>
  <div>Unread2</div>
</div>

JS代码：

 $("#showread").click(function() {
  $("#unread").hide();
  $("#unread").nextAll().hide();
  $("#read").show();
  $("#read").nextUntil("#unread").show();
});

$("#showunread").click(function() {
 $("#read").hide();
 $("#unread").prevUntil("#read").hide();
 $("#unread").show();
 $("#unread").nextAll().show();  
});

隐藏两个ID之间的div

4 个答案: