Question

我有以下代码：

'use strict';

// Data
class cat {
  constructor(name, picture, clicks) {
    this.name = name;
    this.picture = picture;
    this.clicks = clicks;
  }
};

var cat1 = new cat('Mercury', 'cat1.jpg', 0);
var cat2 = new cat('Venus', 'cat2.jpg', 0);
var cat3 = new cat('Mars', 'cat3.jpg', 0);
var cat4 = new cat('Jupiter', 'cat4.jpg', 0);
var cat5 = new cat('Saturn', 'cat5.jpg', 0);
var cat6 = new cat('Neptune', 'cat6.jpg', 0);

var cats = [cat1, cat2, cat3, cat4, cat5, cat6];


// Program
for (var i = 0; i < cats.length; i++) {
  // Current cat
  var icat = cats[i];

  $('#cat_list').append('<li id="cat' + (i + 1) + '">' + icat.name + '</li>');
  $('#cat' + (i + 1)).on('click', (function(iSaved, icatSaved) {
    return function() {
      console.log('You clicked on cat' + (iSaved + 1) + ' from the list!');
      $('#cat_title').text(icatSaved.name);
      $('#cat_image').attr('src', 'img/' + icatSaved.picture);
      $('#catClicks').text(icatSaved.clicks);
      $('#cat_image').on('click', function() {
        icatSaved.clicks++;
        $('#catClicks').text(icatSaved.clicks);
      });
    };
  })(i, icat));
};

除了嵌入式点击处理程序增加了相关cat对象的点击次数之外，它的效果很好。似乎点击增量最终会影响多个cat对象，并且当点击图片时也会导致其中一些增加2,3或4。我必须做一些愚蠢的事情才能得到这种行为，但我不确定是什么。这是因为我在列表单击处理程序中嵌入了一个单击处理程序吗？

-Jim

Answer 1

您正在另一个事件侦听器中设置事件侦听器。每次点击post "/widgets", params: '{ "widget": { "name":"My Widget" } }'，您都会为#cat{N}添加另一个事件监听器。因此，一遍又一遍地单击它会为同一元素设置越来越多的事件侦听器。单击#cat_image时，将调用所有这些事件侦听器，并且因为它们都在递增#cat_image属性，所以后者只需单击一次就会增加很多次。

接近此方法的最佳方法是使用事件委派：

clicks

嵌套变量获取错误递增

1 个答案: