在数组

Question

我正在尝试计算用户在每张图片上触发的点击次数。点击计数存储在数组内的对象中。我怎么能这样做？

var clicks = 0;
var gatas = [];

gatas[0]= {img : "img/ml.jpg", clicks : 0};
gatas[1]= {img : "img/ma.jpg", clicks : 0};

for (var i = 0; i < gatas.length; i++) {

var elemImg = document.createElement("img");
elemImg.src = gatas[i].img;

var elemClick = document.createElement("h3");

//ADD +1 every time the user clicks an image, storing the count in the 
//object

elemClick.textContent = gatas[i].clicks;

document.body.appendChild(elemClick;
document.body.appendChild(elemPic);

};

Answer 1

您必须为每个图像绑定一个click事件处理程序。

另外，不要忘记使用let关键字来声明块范围局部变量。

let声明的变量的范围是定义它们的块，以及任何包含的子块。通过这种方式，let可以正常工作非常像var。主要区别在于 var 变量的范围是整个封闭函数。

这是closures.

中常见的问题

var clicks = 0;
var gatas = [];

gatas[0]= {img : "img/ml.jpg", clicks : 0};
gatas[1]= {img : "img/ma.jpg", clicks : 0};
let elemImg=[];
let elemClick=[];
for (let i = 0; i < gatas.length; i++) {
    elemImg[i] = document.createElement("img");
    elemImg[i].src = gatas[i].img;
    elemClick[i] = document.createElement("h3");
    elemClick[i].textContent = gatas[i].clicks;
    elemImg[i].onclick=function(){
      gatas[i].clicks++;
      elemClick[i].textContent = gatas[i].clicks;
    };
    document.body.appendChild(elemClick[i]);
    document.body.appendChild(elemImg[i]);
};

Answer 2

您是否尝试将onClick（）用于图片代码？ 在锚标记内插入img标记，并尝试使用JavaScript函数调用处理单击。