具有数据切换操作的分页html

Pagination with data-toggle manipulation html

本文关键字：分页 html 操作 数据      更新时间：2023-09-26

我有这样的

<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对象。

另一个问题是，您正在替换那些绑定了事件处理程序而没有附加新事件的元素。

尝试将$('a').click(handler)更改为$(document).on('click', 'a',handler)

http://api.jquery.com/on/#on-事件选择器数据

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

演示：https://jsfiddle.net/SeanWessell/eae71Lqh/

相关文章：