Question

我想编写一个代码，当您点击图像时会出现另一个图像。之后，当您点击新图像时，会出现另一个，等等。

我写了这个适用于第一张图片的代码。我无法弄清楚如何将出现的图像定义为输入。

＆＃13;

var i = 1

function addimage() {
  var img = document.createElement("img");
  img.src = "images/d" + i + ".jpg";
  document.body.appendChild(img);
}

function counter() {
  i = i + 1
}

＆＃13;

<input type="image" src="images/d1.jpg" onclick="addimage(); counter();">

＆＃13;

Answer 1

将onclick功能附加到新图片，其代码与input标记中的代码相同：

＆＃13;

var i = 1

function imageClick() {
  if (! this.alreadyClicked)
  {
    addimage();
    counter();
    this.alreadyClicked = true;
  }
}

function addimage() {
  var img = document.createElement("img");
  img.src = "http://placehold.it/" + (200 + i);
  img.onclick = imageClick;
  document.body.appendChild(img);
}

function counter() {
  i = i + 1
}

＆＃13;

<input type="image" src="http://placehold.it/200" onclick="imageClick();">

＆＃13;

Answer 2

要向元素添加事件处理程序，有三种方法;只使用其中一个：

=＆GT;使用HTML属性。我不推荐这种方法，因为它混合了JS和HTML，从长远来看是不实用的。

<img id="firstImage" src="something.png" onclick="myListener(event);" />

=＆GT;使用JS中的元素属性。这只适用于绑定到该元素的单个事件，因此我避免使用它。

var firstImage = document.getElementById('firstImage');
firstImage.onclick = myListener;

=＆GT;通过将其与JavaScript绑定。自IE9以来，这种方法已经标准化并适用于所有浏览器，因此没有理由不再使用它。

var firstImage = document.getElementById('firstImage');
firstImage.addEventListener("click", myListener);

当然，myListener需要是一个函数，它会将事件作为第一个参数接收。

在您的情况下，当您单击当前不是最后一个图像时，您可能不希望添加其他图像。因此，当用户点击最后一张图片时，您需要添加新图片并停止收听当前图片的点击次数。

var i = 1;

function addNextImage(e) {
   // remove the listener from the current image
   e.target.removeEventListener("click", addNextImage);

   // create a new image and bind the listener to it
   var img = document.createElement("img");
   img.src = "http://placehold.it/" + (200 + i);
   img.addEventListener("click", addNextImage);
   document.body.appendChild(img);

   // increment the counter variable
   i = i + 1;
}

var firstImage = document.getElementById("firstImage");
firstImage.addEventListener("click", addNextImage);

Try on JSFiddle

旁注：虽然JavaScript确实支持省略一些半列，但它被认为是更好的做法，它可以避免小错误。

点击上一张图片

2 个答案: