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事件处理程序

＆＃13;

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)

}

＆＃13;

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

＆＃13;

jQuery - 将Click事件分配给由数组

1 个答案: