與angular4和jQuery分頁

Question

我嘗試在angular 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');
}