javascript - 在事件监听器中发送静态值作为参数

Question

使用 Javascript(和 jQuery)，我有一个包含多个对象的数组。对于该数组中的每个对象，我将一个小的、可点击的图像添加到 div 中。点击每张小图都会改变大图的路径，从而显示出新的图片。

这是我得到的:

for (s = 0; s < splash.length; s += 1)
  {
  // add a new dot to this row
  $(".splash_dots").append ("<div class = 'dot' id = 'dot" + s + "'><img src = 'images/dot2.png'></div>");

  var id = 'dot' + s;

  // add a click handler
  document.getElementById (id).addEventListener ("click", function () {change_splash (s)});
  }

//////////////////////////////////////////////////

function change_splash (s)
  {
  // load a new image for the large photo
  $(".splash").attr ("src", splash[s].screenshot_link);
  }

这几乎可以工作了。问题是，当调用 change_splash() 时，我期望 s 的值是循环添加处理程序时的值。例如，单击第一个点将调用change_splash(0)。然而，它实际上是在点击发生时发送 s 的内容(循环结束后，始终是 array.length)。

我有一个临时解决方案，但我不喜欢它::

if (s === 0) document.getElementById (id).addEventListener ("click", function () {change_splash (0)});
if (s === 1) document.getElementById (id).addEventListener ("click", function () {change_splash (1)});

这看起来效率很低。

我基本上只是想创建一个滑动的醒目广告，就像您在几乎所有零售主页上看到的那样，所以我知道这是可能的。任何想法都值得赞赏。

Answer 1

试试这个

for (var s in splash){
    // create the points, stores the id in the data-id attribute
    $(".splash_dots").append ("<div class ='dot' data-id='" + s + "'><img src='images/dot2.png'></div>");
}

// click listener
$("body").on("click",".dot",function(){
    // retrieve the id from the data-id attribute
    var s = $(this).attr("data-id");
    $(".splash").attr ("src", splash[s].screenshot_link);
});

查看 JSFiddle demo 中的实际操作