javascript - 动态翻页功能 - vanilla javascript

Question

我想为具有多个页面的元素编写一个动态函数。有时只有一页可见，单击前进或后退按钮会显示下一页或上一页。

我有几个具有不同页数的元素。

function pageTurn(forwardID, backwardID, pageClass, counter, numbers) {
    var forward = document.getElementById(forwardID);
    var backward = document.getElementById(backwardID);
    var page = document.getElementsByClassName(pageClass);
    var count = document.getElementById(counter);
    var pageCount = 1;

    forward.addEventListener('click', function() {
        pageCount ++;
        count.innerHTML = pageCount + ' / ' + numbers;
        page[pageCount - 2].classList.add('invisible')
        page[pageCount - 2].addEventListener("transitionend", OnTransitionEnd());

        buttonCheck();
    })

    backward.addEventListener('click', function() {
        pageCount --;
        count.innerHTML = pageCount + ' / ' + numbers;
        page[pageCount].classList.add('invisible')
        page[pageCount].addEventListener("transitionend", OnTransitionEnd());

        buttonCheck();
    })

    function buttonCheck() {
        //SHOW AND HIDE PAGETURN BUTTONS
        if(pageCount == 1) {
            backward.classList.add('invisible');
        } else if (pageCount > 1) {
            backward.classList.remove('invisible');
        } else if (pageCount == numbers) {
            forward.classList.add('invisible');
        } else if (pageCount < numbers) {
            forward.classList.remove('invisible');
        }
    }

    function OnTransitionEnd() {
        page[pageCount - 1].classList.remove('invisible');
    }
}

后退按钮的逻辑相同，只是相反。

我希望函数在单击前进按钮时将值 1 添加到 pageCount。要从 page 元素动态添加和删除 .invisible 类，我想使用 pageCount 变量从类数组中选择正确的页面。但它不起作用。

我做错了什么？

https://jsfiddle.net/1qt8p9of/12/

Answer 1

这里有很多事情需要考虑:我认为你最好在 codereview.stackexchange.com 上发帖.

但是，这里有一个片段，我在其中稍微修改了您提供的代码以使其正常工作。不要犹豫，快来看看吧!

function initialize(forwardID, backwardID, pageClass) {
  const forward = document.getElementById(forwardID);
  const backward = document.getElementById(backwardID);
  const pages = document.getElementsByClassName(pageClass);
  let counter = 0;

  function buttonCheck() {
    if (counter <= 0) {
      backward.setAttribute('disabled', true);
    } else {
      backward.removeAttribute('disabled');
    }

    if (counter >= pages.length - 1) {
      forward.setAttribute('disabled', true);
    } else {
      forward.removeAttribute('disabled');
    }
  }

  forward.addEventListener('click', function() {
    pages[counter].classList.add('invisible');
    counter++;
    pages[counter].classList.remove('invisible');
    buttonCheck();
  });

  backward.addEventListener('click', function() {
    pages[counter].classList.add('invisible');
    counter--;
    pages[counter].classList.remove('invisible');
    buttonCheck();
  });
}

initialize('forwards', 'backwards', 'page');
initialize('forwards2', 'backwards2', 'page2');

.pages .invisible {
  display: none;
}

<fieldset>
  <legend>First set of page</legend>
  <div class="controls">
    <button id="backwards" disabled>&larr;</button>
    <button id="forwards">&rarr;</button>
  </div>

  <div class="pages">
    <div class="page">Page One</div>
    <div class="page invisible">Page Two</div>
    <div class="page invisible">Page Three</div>
    <div class="page invisible">Last Page</div>
  </div>
</fieldset>

<hr />

<fieldset>
  <legend>Second set of pages</legend>
  <div class="controls">
    <button id="backwards2" disabled>&larr;</button>
    <button id="forwards2">&rarr;</button>
  </div>

  <div class="pages">
    <div class="page2">Page One</div>
    <div class="page2 invisible">Page Two</div>
    <div class="page2 invisible">Page Three</div>
    <div class="page2 invisible">Page Four</div>
    <div class="page2 invisible">Last Page</div>
  </div>
</fieldset>

希望对您有所帮助。