jQuery -将单击事件分配给数组添加的图像

Question

我正在尝试构建一个基于jQuery的图片库，使用一个数组来托管图像拇指。我已经成功地将图像绘制成一行，但在如何为数组中的每个图像分配唯一的单击事件的问题上，我很难找到解决方案。

HTML：

<div id="thumbCont"></div>

jQuery/JS：

var thumbImgArray = ["http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-11/256/thumbs-up.png", "http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-11/256/thumbs-up-medium-skin-tone.png", "http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-11/256/thumbs-up-medium-skin-tone.png"]


var $div = $('#thumbCont');
$.each(thumbImgArray, function(i, val) {
        $("<img />").attr("src", val).appendTo($div).css({float: "left", width: "196px", height: "196px", marginRight: "4px", border: "2px solid white", cursor: "pointer"});
 });

这是我的JS Fiddle。

任何帮助或反馈将是非常感谢的！

Answer 1

尝试在创建onclick标记时添加img事件处理程序

var thumbImgArray = ["http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-11/256/thumbs-up.png", "http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-11/256/thumbs-up-medium-skin-tone.png", "http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-11/256/thumbs-up-medium-skin-tone.png"]


var $div = $('#thumbCont');
$.each(thumbImgArray, function(i, val) {

  $("<img id='img_" + i + "' onclick='test(this.id)'/>").attr("src", val).appendTo($div).css({
    float: "left",
    width: "196px",
    height: "196px",
    marginRight: "4px",
    border: "2px solid white",
    cursor: "pointer"
  });
});

function test(imgId) {
  console.log(imgId)

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbCont"></div>

​