0

所以我正在为我的 Udacity 课程中的一个项目创建一个“Cat Clicker”。基本上，我们有 5 张猫的图片（我目前有 4 张），但每张猫图片都应该有自己的点击计数器，用于点击特定图片。我知道有一种方法可以使用一个for循环，但不确定如何。我一直在尝试只addeventlistener为每个单独的图像使用一个，但是它会计算页面上的每次点击（无论在哪里）......有人能弄清楚我错过了什么/做错了吗？

var sassy = document.createElement("img");
sassy.src = 'images/cat.jpg';
sassy.height = "500";
sassy.width = "640";
sassy.alt = "Sassy Cat";
document.getElementById("catimage").appendChild(sassy);

var addUp = (function() {
  var count = 0;
  return function() {
    var sassy = document.getElementById("catimage");
    if (sassy) sassy.innerHTML = "Picture Clicks: " + ++count;
  }
}());
document.addEventListener("click", addUp, false);

var grumpy = document.createElement("img");
grumpy.src = 'images/grumpy-cat.jpg';
grumpy.height = "500";
grumpy.width = "640";
grumpy.alt = "Grumpy Cat";
document.getElementById("grumpyimage").appendChild(grumpy);

var cuddlecats = document.createElement("img");
cuddlecats.src = 'images/cuddles.jpg';
cuddlecats.height = "500";
cuddlecats.width = "640";
cuddlecats.alt = "Cuddling Cats";
document.getElementById("cuddlingcats").appendChild(cuddlecats);

var sketchy = document.createElement("img");
sketchy.src = 'images/sketchycat.jpg';
sketchy.height = "500";
sketchy.width = "640";
sketchy.alt = "Sketchy Cat";
sketchy.co
document.getElementById("sketchycat").appendChild(sketchy);
<div id="catimage">
  <figcaption>Sassy Cat</figcaption>
  <h3 id="sassycount">Picture Clicks: 0</h3>
</div>

<div id="grumpyimage">
  <figcaption>Grumpy Cat</figcaption>
  <h3 id="grumpycount">Picture Clicks: 0</h3>
</div>
<div id="cuddlingcats">
  <figcaption>Cuddling Cats</figcaption>
  <h3 id="cuddlecount">Picture Clicks: 0</h3>
</div>
<div id="sketchycat">
  <figcaption>Sketchy Cat</figcaption>
  <h3 id="sketchcount">Picture Clicks: 0</h3>
</div>

4

2 回答 2

1

您正在将事件侦听器添加到document，因此无论您点击什么，无论是否点击图像，addUp都会调用该函数。

为了将事件附加到特定元素，您必须调用addEventListener该元素。

var grumpyimage = document.getElementById("grumpyimage");
grumpyimage.addEventListener("click", addUp, false);

现在您可以单击grumpyimage，它会调用addUp 为简单起见，您应该addUp为每个图像设置一个函数。

请记住，您应该将其概括为仅使用一个addUp函数并根据计数器的值递增一个计数器，id如下所示：

var addUp = function(counterId) {
  var count = 0;

  return function () {
     var counterEle = document.getElementById(counterId);
     if (counterEle)
        counterEle.innerHTML = "Picture Clicks: " + ++count;
  }
};
var grumpyimage = document.getElementById("grumpyimage");
grumpyimage.addEventListener("click", addUp("grumpyimage-counter"), false);
于 2017-01-16T19:08:25.870 回答
0

您正在犯的错误是：

  1. 您只调用一次 addUp 函数：它返回您的“内部”函数的单个实例。该内部函数具有包含单个“计数”变量的闭包。换句话说，您只对所有图像使用一个计数器。
  2. 您将侦听器添加到文档中。因此，单击文档的任何位置都会调用您的事件侦听器。

试试这个：

var addUp = function(counterId) {
  var count = 0;

  return function () {
     var counterEle = document.getElementById(counterId);
     if (counterEle)
        counterEle.innerHTML = "Picture Clicks: " + ++count;
  }
};

var catImage = document.getElementById("cat-image");
catImage.addEventListener("click", addUp("cat-counter-id"), false);

对其他图像重复最后两行。

需要注意的重要一点是，您调用 addUp 为每个图像/计数器对创建一个侦听器。

当然有更有效的方法可以在不使用闭包的情况下实现上述目标，但我认为您正在尝试学习闭包。

于 2017-01-16T19:22:50.727 回答