时间戳

首页 > 解决方案 > 每次单击列表时删除 X 项上的隐藏类

javascript - 每次单击列表时删除 X 项上的隐藏类

问题描述

我有一大堆交易，在页面加载时只有 5 个项目可见。

我有一个按钮，只需删除“隐藏”类即可加载其余部分。但我不想在单击按钮时全部显示它们，而一次只显示 5 个。

我有点不确定我该怎么做。

我当前的脚本

const cashBackTransactionsWrapper = document.querySelector('.cashback--transactions');

  if (cashBackTransactionsWrapper !== null) {
    const morePostingsButton = document.querySelector('.cash-back--morepostings');

    morePostingsButton.addEventListener('click', function (e) {
      e.preventDefault();

      const cashbackTableRowHidden = cashBackTransactionsWrapper.querySelectorAll('.flex-table.hidden');

      for (var i = 0; cashbackTableRowHidden.length > 0; i++) {
        cashbackTableRowHidden[i].classList.remove('hidden');        
      }
    });
  }

我想要实现的是，当用户单击“morepostings”按钮时，接下来的 5 个项目的隐藏类将被删除。当用户再次单击该按钮时，接下来的 5 个项目将删除该类，依此类推。

如果您愿意，可以使用分页式功能。

标签： javascripthtmlcssfor-loop

解决方案

你有无限的for循环。你应该用 i < 5 替换你的条件。应该有帮助:) 

const cashBackTransactionsWrapper = document.querySelector('.cashback--transactions');

 if (cashBackTransactionsWrapper !== null) {
    const morePostingsButton = document.querySelector('.cash-back--morepostings');

    morePostingsButton.addEventListener('click', function (e) {
      e.preventDefault();

      const cashbackTableRowHidden = cashBackTransactionsWrapper.querySelectorAll('.flex-table.hidden');

      for (var i = 0; i < 5; i++) {
        cashbackTableRowHidden[i].classList.remove('hidden');        
      }
    });
  }

推荐阅读