Question

我有一个简单的“分页”计数器，它从API获取下一页。它工作正常，但问题是每当我更改类别（电影或系列）时，计数器显然不会重置，所以不是取出新类别的第一页，而是从它停止的数字继续。

我尝试了很多条件组合，但到目前为止还没有真正奏效。我确定解决起来并不难，我只是想不出正确的逻辑。

let page = 1; 
document.getElementById('load-more').addEventListener('click', () => {
    page++;

    const movies = document.getElementById('movies');
    const series = document.getElementById('series');


    if(movies.classList.contains('active-link')) {

        getMovies(page);


    } else if (series.classList.contains('active-link')) {

        getSeries(page);

    }
})

重新设置if..else中的let计数器并不真正起作用，因为每次单击“加载更多”按钮时，它都会将其重置为第1页。

Answer 1

为当前电影页面和当前系列页面使用单独的变量。另请注意，您可以使用单个querySelector代替选择后跟classList.contains来简化逻辑：

let moviesPage = 1;
let seriesPage = 1;
document.getElementById('load-more').addEventListener('click', () => {
  if (document.querySelector('#movies.active-link')) {
    moviesPage++;
    getMovies(moviesPage);
  } else if (document.querySelector('#series.active-link')) {
    seriesPage++;
    getSeries(seriesPage);
  }
});

Answer 2

为#movies和#series链接

上的点击设置另一个事件监听器

并在此处将page变量设置为1.

这是切换列表时的常见行为，通常会看到重置分页。

根据条件重置计数器变量

2 个答案: