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>

jQuery单击上一个和下一个

3 个答案: