javascript - 根据条件重置计数器变量

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