Question

我是JS的新手，目前正在从多个不同来源学习，这是一个简单的catclicker游戏，我正在使用vanilla js构建。 第75行 - 我有一个addeventlistner即使在不再被选中后也会被调用。例如，即使在不再选择cat之后它也会继续计数。

这些是说明：

视觉效果
1.申请表应显示
2.按名称列出的至少5只猫的清单 3.显示所选猫的区域

在猫咪显示区域，应显示以下内容 1.猫的名字
2.一张猫的照片 3.显示点击次数的文本
布局的具体细节并不重要，所以你喜欢它的风格。

相互作用
1.当在列表中单击猫名称时，猫咪显示区域应更新以显示所选猫的数据 2.猫区域中的点击次数应该对每只猫都是唯一的，并且在点击猫的图片时应该增加。

   var cats = [{
     name: "Mr. Nibbles",
     img: 'http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg',
     count: 0,
     id: 1
   }, {
     name: "Paws",
     img: "https://www.petfinder.com/wp-content/uploads/2012/11/99233806-bringing-home-new-cat-632x475.jpg",
     count: 0,
     id: 2
   }, {
     name: "Sphyx",
     img: "https://drpem3xzef3kf.cloudfront.net/photos/pets/31905196/1/?bust=1429232863&width=632&no_scale_up=1",
     count: 0,
     id: 3
   }, {
     name: "Millo",
     img: "https://drpem3xzef3kf.cloudfront.net/photos/pets/31905196/3/?bust=1429232864&width=632&no_scale_up=1",
     count: 0,
     id: 4
   }, {
     name: "Meowister",
     img: "https://drpem3xzef3kf.cloudfront.net/photos/pets/31505696/2/?bust=1425080994&width=632&no_scale_up=1",
     count: 0,
     id: 5
   }]

   function catList(array) {

     var listArea = document.getElementsByClassName('ListArea');

     for (var i = 0; i < array.length; i++) {
       var list = document.createElement('li');
       list.className = ("cat");
       list.innerHTML = array[i].name;

       listArea[0].appendChild(list);

       var elem = document.getElementsByClassName('cat');

     }

     for (var x = 0; x < array.length; x++) {
       elem[x].addEventListener("click", (function(numbcopy) {
         return function() {
           loadCat(cats, numbcopy);
         };
       })(x));
     }


     var displayPhoto = document.getElementsByClassName('displayArea')[0];
     var image = document.createElement('img');
     var cattile = document.createElement('h3');
     var catcount = document.createElement('p');
     displayPhoto.appendChild(image);
     displayPhoto.appendChild(cattile);
     displayPhoto.appendChild(catcount);


     function loadCat(array, i) {
       image.src = array[i].img;
       image.style.width = '600px';
       image.className = ("catphoto");
       image.id = (array[i].id);
       image.id = ("selected");

       cattile.innerHTML = array[i].name;

       catcount.innerHTML = array[i].count;

       var selected = document.querySelector("#selected");


       selected.addEventListener('click', function() {
         array[i].count = array[i].count + 1;
         catcount.innerHTML = array[i].count;
       });
     }
   }
   catList(cats);

            body {

              margin-right: 80px;

              margin-left: 80px;

            }

            .col-1 {

              width: 25%;

              float: left;

            }

            .col-2 {

              width: 75%;

              float: right;

            }

            .col-2 img {

              margin-top: 20px;

            }

<body>
  <div class="ListArea col-1">
    <h1> Click on the cat</h1>
  </div>
  <div class="displayArea col-2">
  </div>
</body>

Answer 1

您要多次添加侦听器。您必须在loadCat函数中添加一次侦听器：

image.addEventListener('click', function() {
  var i = this.getAttribute('data-id');
  array[i].count = array[i].count + 1;
  catcount.innerHTML = array[i].count;
});

我添加了属性data-id，用于定义单击哪只猫。

对象中的id猫也必须从0

开始

DEMO

addEventListener无法正常工作

1 个答案: