嵌套变量中获得正确递增

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)); 
}; 

它的工作原理不同的是增加了有问题的猫对象的点击次数嵌入式单击处理大。看起来，点击增量最终会影响多个猫对象，并且在单击图片时还会使其中一些增加2,3或4。我必须做些愚蠢的事情来获得这种行为，但我不确定是什么。这是因为我在列表单击处理程序中嵌入了单击处理程序？

-Jim

Answer 1

您正在另一个事件侦听器中设置一个事件侦听器。每次点击#cat{N}时，都会为#cat_image添加另一个事件侦听器。因此，一遍又一次地单击它可为同一元素设置越来越多的事件侦听器。当您单击#cat_image时，所有这些事件侦听器都会被调用，并且由于它们都在增加clicks属性，所以只需点击一下，后者就会增加很多次。

以接近这一点的最佳方法是使用事件委派：

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

    // add a class of .cat and a data-index attribute to all cats 
    $('#cat_list').append('<li class="cat" data-index="' + i + '">' + icat.name + '</li>'); 
    //       ^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^ 
}; 


var catSaved = null;        // move this outside the event listener to be visible for both event listeners 
$('#cat_list').on('click', '.cat', function(e) { // whenever a .cat element get clicked from within #cat_list element 
    var index = $(this).data('index');   // get the index of that cat from cats array (previously stored in data-index) 
    catSaved = cats[index];      // get the cat itself 

    $('#cat_title').text(catSaved.name); 
    $('#cat_image').attr('src', 'img/' + catSaved.picture); 
    $('#catClicks').text(catSaved.clicks); 
}); 

$('#cat_image').on('click', function() {   // move this event listener outside, to set it only once 
    if(catSaved) {        // if we have a catSaved element 
     catSaved.clicks++;      // ... 
     $('#catClicks').text(catSaved.clicks); 
    } 
});