事件侦听器以获取数组中的下一项

乐华

创建一个脚本来循环遍历数组中的项目,最好是下一个和上一个项目。然而,当前脚本有效,它总是从零索引开始,无论当前在创建的“模拟模式”中显示哪个项目。完整脚本在这里:

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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章