我正在尝试创建一个非常简单的图像 slider 。虽然很简单，但按照我的做法，我不得不输入太多的组合。
这就是我所拥有的:
<script>
$(document).ready(function(){
$('#1').show();
$('#2').hide();
$('#3').hide();
$("next-btn").click(function(){
$("#1").hide();
$("#2").show();
});
});
</script>
</head>
<body>
<div id="slider">
<div id="1" class="slide"><img src="slide-image-1" alt="" /></div>
<div id="2" class="slide"><img src="slide-image-2" alt="" /></div>
<div id="3" class="slide"><img src="slide-image-3" alt="" /></div>
</div>
<div id="previous-btn">Previous slide</div>
<div id="next-btn">Next slide</div>
正如你通过 jquery 代码看到的，我将不得不输入不同的 onclick，具体取决于隐藏的图像等。
如何更改此设置，以便它可以转到下一个或上一个 div，并在单击任一按钮时显示它，而无需添加太多组合？
最佳答案
这段代码应该可以正常工作(经过测试)。我希望你能明白这个想法:)。
<script>
var active = 0;
var n = $('#slider div').length; // number of divs...
$(document).ready(function(){
showElement(1);
$("#next-btn").click(function(){
if (active < n) showElement(active + 1);
});
$("#previous-btn").click(function(){
if (active > 1) showElement(active - 1);
});
});
function showElement(id) {
$('#slider div').hide();
$('#' + id).show();
active = id;
}
</script>
active 存储显示的元素数量。当您显示其他内容时，您会隐藏所有内容，只显示您需要的内容。 n 用于存储最大数量的元素，这样您就不会超出范围。
顺便说一句，这不是最高效的内存解决方案，但修改它非常简单，而且非常灵活。老实说，您应该跟踪显示哪张幻灯片、隐藏哪张幻灯片，并仅隐藏显示的幻灯片，并仅显示您需要的幻灯片。但如果只有很少的幻灯片(100？)，性能差距不会成为问题，而代码的清晰度和 future 的可扩展性在这里要好得多。
此外，如果将来出现问题，每次用户单击某些内容时，showElement 函数都会修复它:隐藏所有内容，只显示您需要的内容。
查看此链接下的有效解决方案:http://codepen.io/anon/pen/XbPogg
顺便说一句:您可以在 html 标记中添加更多幻灯片(id = 1, 2, 3, 4, 5, 6, ...)，并且此脚本无需任何更改即可运行。
关于javascript - JQuery Onclick 隐藏/显示 - 下一堂或上一个类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31574263/