Question

当我点击＆＃34;固定＆＃34;然后它将隐藏每次点击的下一个div。但除了第一个div外，它无法隐藏。这是源代码：

$(document).ready(function(){
  $(".fixed").click(function(){
     $(this).next().hide();
  });
});




<div class="wrapper">
     <div class="fixed"></div>
    <div class="first">First</div>
    <div class="first">Second</div>
    <div class="first">Third</div>
    <div class="first">Forth</div>
    <div class="first">Fifth</div>
</div>

Answer 1

对nextAll()和:visible伪类选择器使用:first方法。 :visible将选择所有可见元素，:first将选择所选元素中的第一个元素。

$(document).ready(function() {
  $(".fixed").click(function() {
    $(this).nextAll('.first:visible:first').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="fixed">click</div>
  <div class="first">First</div>
  <div class="first">Second</div>
  <div class="first">Third</div>
  <div class="first">Forth</div>
  <div class="first">Fifth</div>
</div>

Answer 2

您可以跟踪哪个是要隐藏的下一个元素：

var sibs = document.querySelectorAll(".wrapper > div")
var sibCount = sibs.length - 1;    
var nextHide = 0;

$(function(){
    $(".fixed").click(function(){
        nextHide++;
        $(sibs[nextHide]).hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="fixed">FIXED</div>
    <div class="first">First</div>
    <div class="first">Second</div>
    <div class="first">Third</div>
    <div class="first">Forth</div>
    <div class="first">Fifth</div>
</div>

Answer 3

尝试查看此jQuery

想象一下你有

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

您实际需要做的是

{{1}}

祝你好运

我想在每次点击时隐藏下一个div。但无法找到解决方案

3 个答案: