动态页面转动功能 - 香草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');
    }
}

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

我希望函数在点击前进按钮时向pageCount添加值1。要从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>

我希望这能帮到您。