Question

我尝试在角度4和jquery中应用分页，但是当我点击下一个按钮时它会移动前2页然后移动3个其他页面然后移动其他5个页面（点击时）时出错...

代码组件：

addClass(x) {
  $(".page-item").click(function () {
    $(this).addClass("current").siblings().removeClass('current');
  });
}

next() {
  $('.next').click(function () {
    $('.current').next('li').trigger('click');
  });
}

代码html：

<ul>
  <li class="previous">Previous</li>
  <li class="next" (click)="next()">Next</li>
</ul>

<ul class="pagination">
  <li *ngFor="let x of pages" class='page-item current' 
      (click)='addClass(x)'>{{x}}</li>
</ul>

当我在第5页中单击时添加类当前，但是错误类当前它首先单击移动2页，然后单击移动3个其他页面，然后单击移动5页

Answer 1

您已经绑定了HTML模板中的click事件：

<li class="next" (click)="next()">Next</li>

在您的组件中，您每次点击都会添加新的click处理程序：

next()
{
   $('.next').click(function(){
     $('.current').next('li').trigger('click');
   });
}

所以你真正想做的只是在方法中继续点击而不是添加新的处理程序：

next()
{
   $('.current').next('li').trigger('click');
}

使用angular4和jquery进行分页

1 个答案: