我无法理解如何使用 jQuery 来实现。
这是我的 HTML 代码:
<div id="contentbox1" class="contentbox">content 1</div>
<div id="contentbox2" class="contentbox" style="display: none;">content 2</div>
<div id="contentbox3" class="contentbox" style="display: none;">content 3</div>
<div id="contentbox4" class="contentbox" style="display: none;">content 4</div>
<div id="contentbox5" class="contentbox" style="display: none;">content 5</div>
<hr />
<div id="pager" class="pager"> <span id="actualpage">1</span>/5</div>
CSS:
div.contentbox {
width: 300px;
height: 300px;
background: #cccccc;
float: left;
display: inline;
}
div.pager {
cursor: pointer;
}
hr {
display: block;
clear: both;
margin: 10px 0px 10px 0px;
}
我无法理解如何开发它,如果我单击 #pager
以查看下一个框并更改 #actualpage
中的第一个数字。 jQuery函数有可能吗?
我尝试了很多方法,但都没有成功。这是我的JSFIDDLE .
最佳答案
我已经更新了你的 fiddle ,它现在像一个圆形旋转木马一样工作。看看这是否有帮助,并询问您是否需要更改任何内容。
演示 JSFiddle
$("#pager").on("click", function () {
var len = $('.contentbox').length;
var cur = +($('#actualpage').text());
if (cur === len) cur = 0;
$('#actualpage').text(cur+1);
$('.contentbox').hide();
$('#contentbox' + (cur+1)).show();
});
关于jquery - 箱子换号? (jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22532046/