javascript - 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();
    });
});

fiddle 链接

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>