使用jquery动态重置值？

Question

我有一个分页的部分。

分页工作正常，但是否可以使用jquery 根据从inputtext 接收的数字动态重置分页。

例如：

在我的分页中显示1 2 3。

现在我得到了一个号码100。

所以分页部分应该重置为100，其中100 是活动元素，数字是100 101 102。

现在如果 101 是最后一页。 然后它应该突出显示 100 数字和 101 最后。

我再次输入 50 所以分页部分应该重置为 50 51 52 ，其中 50 被突出显示。

当我尝试时，它非常严重地破坏了流程。以下是我一直在做的事情。

首先，分页如何检测该数字已输入文本框中（我用 javascript 编写的警报）。

非常感谢任何建议。

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link

var a=+50;
alert("number received"+a);
    if($(this).hasClass('active')) return false;
  
    var active_elm = $('ul.pagination a.active');
  
    if(this.id == 'next'){
      var _next = active_elm.parent().next().children('a');
      if($(_next).attr('id') == 'next') {
        
        // appending next button if reach end
        var num = parseInt($('a.active').text())+1;
        active_elm.removeClass('active');
        $('.three_links').first().remove();
  			$('.three_links').last().after('<li class="three_links"><a class="active" href="#">'+num+'</a></li>');
        return; 
      }
      _next.addClass('active');   
      
      
      
      
    }
    else if(this.id == 'prev') {
      var _prev = active_elm.parent().prev().children('a');
      if($(_prev).attr('id') == 'prev'){
      	var num = parseInt($('a.active').text())-1;
        if(num > 0){
          active_elm.removeClass('active');
        	$('.three_links').last().remove();
  				$('.three_links').first().before('<li class="three_links"><a class="active" href="#">'+num+'</a></li>');
        }
        return;
      }
      _prev.addClass('active');   
    } else {
      $(this).addClass('active');
    }
    active_elm.removeClass('active');
    
});

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

div.center {text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
  <ul class="pagination">
    <li><a href="#" id="prev">«</a></li>
    <li class="three_links"><a id="test1" href="#">1</a></li>
    <li class="three_links"><a id="test2" class="active" href="#">2</a></li>
    <li class="three_links"><a id="test3" href="#">3</a></li>
    <li><a href="#" id="next">»</a></li>
  </ul>
</div>

Answer 1

你可以试试这个，也许对你有帮助

$(document).ready(function(){
 $( "#paging" ).keyup(function() {
   var val = this.value;
   if(!val || val < 1){return;}
   $( ".pagination li a" ).removeClass( "active" );
   $( ".pagination li" ).each(function(index, event) {
    if(index != 0 && index != 4){
    if(index == 1){
     $( this ).children('a').addClass( "active" );
    }
    $( this ).children('a').text(val);
    val++;
   }
  });
 });
});

在 HTML 中，我添加了一个输入框

 <input type='number' id='paging'></input>
 <div class="center">
  <ul class="pagination">
   <li><a href="#" id="prev">«</a></li>
   <li class="three_links"><a id="test1" href="#">1</a></li>
   <li class="three_links"><a id="test2" class="active" href="#">2</a></li>
   <li class="three_links"><a id="test3" href="#">3</a></li>
   <li><a href="#" id="next">»</a></li>
  </ul>
 </div>

它将从 keyup 的输入中获取值，您可以根据需要更改此 keyup 事件。谢谢。

Answer 2

我为此使用了一个非常基本且简单的解决方案。我在输入页码的文本框上创建了一个函数 onclick，我在函数中做了以下操作：

function test()
{
   var num = 27 //Assuming 27 is the number
   $('#test1').html(27);
   $('#test2').html(28);//Add 1
   $('#test3').html(29); // Add 2
}