我想制作一个按钮，back page如果我单击它，它将创建一个按钮，它将返回到最后一个 div 内容。我已经有了下一页的功能，但我已经没有为back page按钮制作功能的逻辑了。
这是我的内容代码和我的功能next()
function next() {
if ($('#content1').hasClass('')) {
$('#content2').removeClass('hidden');
$('#back').removeClass('hidden');
$('#content1').addClass('hidden');
} else if ($('#content2').hasClass('')) {
$('#content2').addClass('hidden');
$('#content3').removeClass('hidden');
} else if ($('#content3').hasClass('')) {
$('#content3').addClass('hidden');
$('#content4').removeClass('hidden');
} else if ($('#content4').hasClass('')) {
$('#content4').addClass('hidden');
$('#content5').removeClass('hidden');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="myDiv">
<div id="content1">
<h1>1</h1>
</div>
<div id="content2" class="hidden">
<h1>2</h1>
</div>
<div id="content3" class="hidden">
<h1>3</h1>
</div>
<div id="content4" class="hidden">
<h1>4</h1>
</div>
<div id="content5" class="hidden">
<h1>5</h1>
</div>
<button onclick='next()'>Next Page</button>
<button id="back" onclick='back()' class="hidden">Back Page</button>
</div>你可以这样做：
function next() {
var div = $("div[id^=content]:visible")
var nextdiv = div.next("[id^=content]");
if (nextdiv) {
div.addClass("hidden");
nextdiv.removeClass("hidden");
$("#back").show();
$('#next').toggle(nextdiv.next("[id^=content]").length > 0)
}
}
function back() {
var div = $("div[id^=content]:visible")
var prevdiv = div.prev("[id^=content]");
if (prevdiv) {
div.addClass("hidden");
prevdiv.removeClass("hidden");
$("#next").show();
$('#back').toggle(prevdiv.prev("[id^=content]").length > 0)
}
}
这将使其更加动态和易于管理。
我在这里使用的一件事是[id^=content]选择器。这意味着它只会选择 id 以 开头的元素content。
function next() {
var div = $("div[id^=content]:visible")
var nextdiv = div.next("[id^=content]");
if (nextdiv) {
div.addClass("hidden");
nextdiv.removeClass("hidden");
$("#back").show();
$('#next').toggle(nextdiv.next("[id^=content]").length > 0)
}
}
function back() {
var div = $("div[id^=content]:visible")
var prevdiv = div.prev("[id^=content]");
if (prevdiv) {
div.addClass("hidden");
prevdiv.removeClass("hidden");
$("#next").show();
$('#back').toggle(prevdiv.prev("[id^=content]").length > 0)
}
}.hidden {
display: none
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv">
<div id="content1">
<h1>1</h1>
</div>
<div id="content2" class="hidden">
<h1>2</h1>
</div>
<div id="content3" class="hidden">
<h1>3</h1>
</div>
<div id="content4" class="hidden">
<h1>4</h1>
</div>
<div id="content5" class="hidden">
<h1>5</h1>
</div>
<button id="next" onclick='next()'>Next Page</button>
<button id="back" onclick='back()' class="hidden">Back Page</button>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句