我想为具有多个页面的元素编写一个动态函数。有时只有一页可见,单击前进或后退按钮会显示下一页或上一页。
我有几个具有不同页数的元素。
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
变量从类数组中选择正确的页面。但它不起作用。
我做错了什么?
最佳答案
这里有很多事情需要考虑:我认为你最好在 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>←</button>
<button id="forwards">→</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>←</button>
<button id="forwards2">→</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>
希望对您有所帮助。
关于javascript - 动态翻页功能 - vanilla javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49089177/