Question

我正在创建一个页面，显示屏幕上的许多猫，每次点击计数器都会增加1。我遇到的问题是，现在对于div中的每次点击都会导致计数器而不是图像本身。

以下是代码：

     display: function () {

        for (i = 0, idx = 0; i < cats.image.length; i++, idx++) {

            formattedCatNames = HTMLcatName.replace("%data%", cats.name[i]);
            var catNames = formattedCatNames;

            formattedCatImages = HTMLcatImage.replace("%data%", cats.image[i]);
            var catImages = formattedCatImages;

            formattedCatCounter = HTMLcatCounter.replace("%data%", cats.clicks[i]);
            var catCounter = formattedCatCounter

            var elem = document.createElement('div');
            elem.innerHTML = catNames + catImages + catCounter;

            elem.addEventListener('click', (function(catIndex) {
                return function() {
                    cats.clicks[catIndex]++;
                };
            })(i));
            document.body.appendChild(elem);
        }
    },
}

cats.display();

我已经尝试将事件处理程序修改为类似的东西，但控制台声明它未定义：

    elem.getElementsByTagName('img').addEventListener('click', (function(catIndex) {
        return function() {
            cats.clicks[catIndex]++;
    };

任何建议都将不胜感激。

Answer 1

看起来您正在使用img将innerHTML添加到div中，因此一旦设置了innerHTML，您就可以查询div以获取对其中图像的引用并添加点击单凭处理程序。

elem.querySelector('img').addEventListener('click', (function (catIndex) {
    return function () {
        cats.clicks[catIndex]++;
    };
})(i));

注意：如果div中有多个图像元素，您可以使用类或任何其他属性细化选择器

在createElement之后直接使用addEventListener（＆＃39; div＆＃39;）

1 个答案: