创建一个脚本来循环遍历数组中的项目,最好是下一个和上一个项目。然而,当前脚本有效,它总是从零索引开始,无论当前在创建的“模拟模式”中显示哪个项目。完整脚本在这里:
var dogs = document.querySelectorAll(".dog-div");
var dogArr = Array.prototype.slice.call(dogs);
var modal = document.querySelector(".modal");
var modalTitle = document.querySelector(".modal-title");
var modalImg = document.querySelector(".modal-img");
var leftArrow = document.getElementById("left-arrow");
var rightArrow = document.getElementById("right-arrow");
for (i = 0; i < dogArr.length; i++) {
dogArr[i].addEventListener("click", function(e){
e.preventDefault();
modal.style.display = "block";
modalTitle.textContent = this.dataset.dogName;
modalImg.setAttribute("src", this.dataset.dogImage );
})
}
function nextDog() {
i = i + 1;
i = i % dogArr.length;
return dogArr[i];
}
rightArrow.addEventListener("click", function(e) {
e.preventDefault();
console.log(nextDog());
})
任何指导表示赞赏。
试试这个:
var dogs = document.querySelectorAll(".dog-div");
var dogArr = Array.prototype.slice.call(dogs);
var modal = document.querySelector(".modal");
var modalTitle = document.querySelector(".modal-title");
var modalImg = document.querySelector(".modal-img");
var leftArrow = document.getElementById("left-arrow");
var rightArrow = document.getElementById("right-arrow");
function makeIterable(arr) {
var cur = 0;
arr.next = function () {
return ++cur >= this.length ? false : this[cur];
};
arr.prev = function () {
return --cur < 0 ? false : this[cur];
};
arr.cur = function () {
return cur;
};
arr.setCur = function (pos) {
cur = pos;
};
return arr;
};
makeIterable(dogArr);
function clickedClassHandler(name,callback) {
var allElements = document.body.getElementsByTagName("*");
for(var x = 0, len = allElements.length; x < len; x++) {
if(allElements[x].className == name) {
allElements[x].onclick = handleClick;
}
}
function handleClick() {
var elmParent = this.parentNode;
var parentChilds = elmParent.childNodes;
var index = 0;
for(var x = 0; x < parentChilds.length; x++) {
if(parentChilds[x] == this) {
break;
}
if(parentChilds[x].className == name) {
index++;
}
}
callback.call(this,index);
}
}
clickedClassHandler("dog-div",function(index){
dogArr.setCur(index); //here's where you set the current position of the array based on whichever item is selected.
modal.style.display = "block";
modalTitle.textContent = dogArr[dogArr.cur()].dataset.dogName;
modalImg.setAttribute("src", dogArr[dogArr.cur()].dataset.dogImage );
});
rightArrow.addEventListener("click", function(e) {
e.preventDefault();
if (dogArr.cur() < dogArr.length-1) {
console.log(dogArr.next());
modalTitle.textContent = dogArr[dogArr.cur()].dataset.dogName;
modalImg.setAttribute("src", dogArr[dogArr.cur()].dataset.dogImage );
}
})
leftArrow.addEventListener("click", function(e) {
e.preventDefault();
if (dogArr.cur() != 0) {
console.log(dogArr.prev());
modalTitle.textContent = dogArr[dogArr.cur()].dataset.dogName;
modalImg.setAttribute("src", dogArr[dogArr.cur()].dataset.dogImage );
}
})
每当您单击按钮时,您都需要记住所单击项目的位置。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句