jquery上一个和下一个点击切换

Question

我想在单击上一个和下一个时显示和隐藏一个 div。我正在使用 jQuery 切换来实现这一点。以下是我迄今为止尝试过的。

HTML 代码

<div id="one">a</div>
<div id="two">b</div>
<div id="three">c</div>

<div id="prev">prev</div>
<div id="next">next</div>

jQuery 脚本

jQuery(function(){
    jQuery("#two, #three").hide();
    jQuery("#next").on("click", function(){
        jQuery("#one, #two, #three").toggle();
    });
});

小提琴链接

https://jsfiddle.net/mqns2hy4/

从上面可以看出，当我点击“下一步”时，我只希望 b 出现，然后当我再次点击时，我希望只有 c 等等。同样，单击“上一个”时，我希望上面的内容反向移动，依此类推。

Answer 1

您可以创建一个变量来保存活动元素的索引并在点击时更改该变量。然后，您可以隐藏除具有当前活动索引的元素之外的所有元素。

let active = 0;
let el = $("div");
let total = el.length - 1;

const toggle = (el, index) => {
  el.hide()
  el.eq(index).show()
}

toggle(el, active)

$('button').on('click', function() {
  this.id === 'prev' ? active -= 1 : active += 1;
  if(active > total) active = 0;
  if(active < 0) active = total
  toggle(el, active)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one">a</div>
<div id="two">b</div>
<div id="three">c</div>

<button id="prev">prev</button>
<button id="next">next</button>

Answer 2

你可以保留当前显示的 div 的索引：

 jQuery(function(){
   let index = 0;
   // you could also use a class to select them:
   let divs = ["#one", "#two", "#three"].map(it => jQuery(it));

   divs.forEach(it => it.hide());

   jQuery("#next").on("click", function(){
    divs[index].show();
    if(index > 0) divs[index - 1].hide();
    index++;
  });
});

Answer 3

$(document).ready(function() {
    $(".page").hide();
    $("#page1").show();
});

$(document).on('click', "#next", function(){
    var pageCount = $(".page").length;
    var position = $(".page:visible").data('position');
    $(".page:visible").hide();
    if(position < pageCount){
        $("#page" + (position+1)).show();
    }
    else
    {
        $("#page1").show();
    }
});
$(document).on('click', "#prev", function(){
    var position = $(".page:visible").data('position');
    var pageCount = $(".page").length;
    $(".page:visible").hide();
    if(position > 1){
        $("#page" + (position-1)).show();
    }
    else
    {
        $("#page" + pageCount).show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page1" data-position="1" class="page">a</div>
<div id="page2" data-position="2" class="page">b</div>
<div id="page3" data-position="3" class="page">c</div>

<div id="prev">prev</div>
<div id="next">next</div>