使用addEventListener在没有Jquery的JavaScript中切换图像

Question

我正在尝试用addEventListner转换图像。我可以使用数组进行测试，但尝试使用事件侦听器进行测试，但是遇到了问题。

HTML：

<img id="previous" style="left: 0">&lt;</img>
<img id="mainImg" src="https://res.cloudinary.com/vaqar/image/upload/v1499825595/DSC_0015_b0hr2j.jpg"></img>
<img id="next" style="right: 0">&gt;</img>

JavaScript：

const slider = [
    {
       imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg",
   },
   {
       imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826238/DSC_0360_sfwyqh.jpg",

   },
   {
       imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826221/DSC_0303_esrlla.jpg",
   },
];

 var i = 0;

 var sliderImg = document.querySelector("mainImg");
 sliderImg.addEventListener('click', function(e){
       e.src = e[i+1].imgSrc;
       ++i;
 });

Answer 1

单击事件的事件不是对象本身，而是Event对象。您需要访问target属性来设置src。

e.target.src

此外，您还试图对事件而不是对array本身使用数组语法。e[i+1].imgSrc不是什么真正的东西。有几个策略，你可以采取正确循环的图像阵列。一种方法是跟踪数组中图像的当前索引，每次单击就会增加它。我认为这就是基于i变量的方向。

注意：要小心在单击事件处理程序中进行范围界定。除非您处于可以使用箭头函数的情况下，否则this作用域已发生更改。

// Your array is overly complex
const slider = [
  { imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg" },
  { imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826238/DSC_0360_sfwyqh.jpg" },
  { imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826221/DSC_0303_esrlla.jpg" },
];

 var sliderImg = document.querySelector("mainImg");
 sliderImg.addEventListener('click', function(e){
       i++;
       // test if you've exceeded the array limits and loop back to 0.
       if (i === slider.length) {
            i = 0;
       }       
               // use slider here
       e.target.src = slider[i].imgSrc;

 });

Answer 2

您的const slider语法不好，它是一个包含对象的数组，而不是反转对象，您可以使用this关键字直接访问img的src：

​

const slider = [
    {
        imgSrc: "https://www.andlil.com/wp-content/uploads/2013/04/R%C3%A8gle-1.png",
    },
    {
        imgSrc: "http://mooc.politechnicart.net/newageofhumanity/wp-content/uploads/sites/34/number-2-design-md.png",
    },
    {
        imgSrc: "http://ruedesoptions.com/wp-content/uploads/2014/08/chiffre3.jpg",
    },
];
let i = 0;

let sliderImg = document.querySelector("#mainImg");
sliderImg.addEventListener('click', function (e) {
    if (i < (slider.length - 1)) {
        this.src = slider[++i].imgSrc;
        document.querySelector('#text-img').innerText = "image " + i.toString() + " src : " + slider[i].imgSrc
    }
});

let prevImg = document.querySelector("#previous");
prevImg.addEventListener('click', function (e) {
    if (i > 0) {
        sliderImg.src = slider[--i].imgSrc;
        document.querySelector('#text-img').innerText = "image " + i.toString() + " src : " + slider[i].imgSrc
    }
});
let nextImg = document.querySelector("#next");
nextImg.addEventListener('click', function (e) {
    if (i < (slider.length - 1)) {
        sliderImg.src = slider[++i].imgSrc;
        document.querySelector('#text-img').innerText = "image " + i.toString() + " src : " + slider[i].imgSrc
    }
});

 img {
      max-height: 50px;
      cursor: pointer;
    }

<button id="previous" style="left: 0">&lt;</button>
<img style="max-height: 50px;" id="mainImg" src="https://www.andlil.com/wp-content/uploads/2013/04/R%C3%A8gle-1.png"></img>
<button id="next" style="right: 0">&gt;</button>
<p id="text-img"></p>

​

Answer 3

看起来，e.src可能不是您想要访问的对象。

 sliderImg.addEventListener('click', function(e){
       e.src = e[i+1].imgSrc;
       ++i;
 });

e实际上返回event。

const img1 = document.getElementById('img1');

img1.addEventListener('click', (event) => {
  event.target.src = 'http://placekitten.com/g/300/200'
});