javascript - 如何显示与单击的列表项关联的图像

Question

我需要学校项目的帮助。我有一个 catClicker 应用程序，它显示猫的图像以及该图像被单击的次数。

现在我必须显示五只不同猫的名字。当点击一只猫的名字时，我必须更新该猫的图像和计数器。

这是我到目前为止所做的:

https://github.com/silvodesigns/catClicker

Answer 1

Change your cats object like this

var cats = {'Tabby' : {'count' : 0, 'src' : 'img/Cat01.jpg'}, 'Tiger' : {'count' : 0, 'src' : 'img/Cat02.jpg'}};

说明:我们将猫的名称保留为各个猫属性的键，以便我们可以在单击时使用猫的名称来获取它们。

For your event handler

   $("ul#cats>li").on("click", function(){
     var name = $(this).html();
     var src = cats[name].src;
     $('img.cat').attr('src',src);
     cats[name].count = cats[name].count + 1;
    });

说明:

正在使用 Jquery，因为我可以看到您正在使用 jquery.js。

1. 我们使用 html 属性获取名称。

2. 然后我们将其作为 cats 对象的键传递，以获取名称和计数等属性。

注意:我只添加了两只猫，如果有的话添加更多:D