我有这样的东西
<div class="container">
<h2>Pagination - site</h2>
<ul class="pagination">
<li><a data-toggle="tab" href="#tab1">1</a></li>
<li><a data-toggle="tab" href="#tab2">2</a></li>
<li><a data-toggle="tab" href="#tab3">3</a></li>
</ul>
</div>
<div id="tabcont" class="tab-content">
<div id="tab1" class="tab-pane">name1</div>
<div id="tab2" class="tab-pane">name2</div>
<div id="tab3" class="tab-pane">name3</div>
<div id="tab4" class="tab-pane">name4</div>
<div id="tab5" class="tab-pane">name5</div>
</div>
<script>
var i = null;
$('a').click(function(){
console.log(i);
console.log($(this).text());
if($(this).text() >= 3){
if(i < 3 || i === null){
$('.pagination').html('<li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li><li><a data-toggle="tab" href="#tab4">4</a></li><li><a data-toggle="tab" href="#tab5">5</a></li>');
}
i = $(this.text);
}else{
if(i >= 3 || i === null){
$('.pagination').html('<li><a data-toggle="tab" href="#tab1">1</a></li><li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li>');
}i = $(this.text); }
});
</script>
第一次代码工作正常并且分页,但下次点击功能不起作用,我不知道为什么?
最佳答案
脚本的一个问题是 i = $(this.text);
它应该是 i = $(this).text();
。当您需要字符串时,您可以将 i 设置为 jQuery 对象。
另一个问题是您要替换绑定(bind)了事件处理程序的元素而不附加新事件。
尝试将 $('a').click(handler)
更改为 $(document).on('click', 'a',handler)
http://api.jquery.com/on/#on-events-selector-data
var i = null;
$(document).on('click', 'a[data-toggle="tab"]', function() {
console.log(i);
console.log($(this).text());
if ($(this).text() >= 3) {
if (i < 3 || i === null) {
$('.pagination').html('<li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li><li><a data-toggle="tab" href="#tab4">4</a></li><li><a data-toggle="tab" href="#tab5">5</a></li>');
}
i = $(this).text();
} else {
if (i >= 3 || i === null) {
$('.pagination').html('<li><a data-toggle="tab" href="#tab1">1</a></li><li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li>');
}
i = $(this).text();
}
});
关于javascript - 使用数据切换操作 html 进行分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34532429/