Question

我一直在研究StackOverflow以寻找这个问题的答案。有答案与此有关但我没有找到这个具体案例的答案。我有一系列的div。我希望在页面首次加载时显示第一个，然后按顺序移动到第2个，第3个等，或者反向移动到第2个，第1个...通过单击相应的“上一个”和“下一个”按钮。任何时候只能看到一个div。现在我正朝着前进的方向努力。我想使用一个针对更改div ID的循环，点击触发就可以了。我错了。

这是HTML

    <div class="container">
        <div id="section1" class="first">
                        something in section 1
        </div>
        <div id="section2" class="ad">
             <p>doing tricks with section 2</p>
        </div>
        <div id="section3" class="ad">
        <p>and now is time for section 3</p>
        </div>

        <button id="hide">Hide</button>


        </div>
        <button id="show">Show</button>

这是JS

        $(document).ready(function () {
          var count = $("div.container div").length;
          //alert(count);
          $('#hide').on('click', function () {
            $('div.ad').hide();   // hide all divs but the first
          });


          for (var i=0; i< count; i++) {
             $('#show').on('click', function () {
             var j = i+1;
             $('#section'+j).next().show();   
             $('#section'+(j+1)).prev().hide();
             });  
          };
        });

Answer 1

在您的问题中，count始终为3，这就是问题的开始。总共有三个div个元素;问题是其中一些隐藏。它们从视线中消失，但不是从文件中消失。

$(function() {
  $('#hide').click(function() {
    $('.container > div:visible:last').hide();
  });
  $('#show').click(function() {
    $('.container > div:not(:visible):first').show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="section1" class="first">
    something in section 1
  </div>
  <div id="section2" class="ad">
    <p>doing tricks with section 2</p>
  </div>
  <div id="section3" class="ad">
    <p>and now is time for section 3</p>
  </div>
</div>
<button id="hide">Hide</button>
<button id="show">Show</button>

编辑：显然，我误解了这个问题。（为什么你的按钮被称为“隐藏”和“显示”而不是“上一个”和“下一个”？！？）你想要的似乎是这样：

$(function() {
  $('.ad').hide();
  $('#prev').click(function() {
    var $prev, $current = $('.container > div:visible:first');
    if ($prev = $current.prev()) {
      $prev.show();
      $current.hide();
    }
  });
  $('#next').click(function() {
    var $next, $current = $('.container > div:visible:first');
    if ($next = $current.next()) {
      $next.show();
      $current.hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="section1" class="first">
    something in section 1
  </div>
  <div id="section2" class="ad">
    <p>doing tricks with section 2</p>
  </div>
  <div id="section3" class="ad">
    <p>and now is time for section 3</p>
  </div>
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

Answer 2

http://jsfiddle.net/mwq1pkow/

<强> CSS：

.hidden {
    display:none
}
.shown {
    display:block
}

<强> HTML：

<div class="container">
    <div id="section1" class="cont_div shown">something in section 1</div>
    <div id="section2" class="cont_div hidden">
        <p>doing tricks with section 2</p>
    </div>
    <div id="section3" class="cont_div hidden">
        <p>and now is time for section 3</p>
    </div>
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

<强> JQ：

$('#next').click(function () {
    var $next = $('.shown').next();

    $('.shown').removeClass('shown').addClass('hidden');

    if ($next.size() == 0) $next = $('.cont_div').first();

    $next.addClass('shown');

})

$('#prev').click(function () {
    var $prev = $('.shown').prev();

    $('.shown').removeClass('shown').addClass('hidden');

    if ($prev.size() == 0) $prev = $('.cont_div').last();

    $prev.addClass('shown');

})

在点击时一次只显示一个div

2 个答案: