Question

我目前正在开设Udacity课程＆＃39; Javascript设计模式＆＃39;我的尴尬标题作业和Cat Clicker＆＃39;我遇到了一些麻烦。您应该能够单击列表中的其中一个猫名称，并且应该增加“猫计数”数量＆＃39;跨度。我似乎无法使点击事件监听器适用于＆＃34; cat_list＆＃34;。一旦我把事件监听器放在一个闭包中，它似乎不再做任何事情。没有闭包，只有最后一只猫获得事件监听器。非常感谢任何信息，谢谢。此外，有关调试点击的信息也将受到赞赏。

JSFiddle代码： http://jsfiddle.net/pzagjdx4/1/ 源代码：

的index.html

<html>
<body>
  <span > Cat count: </span>
  <span id="cat_span">0</span>
  <div id="cat_div">
  </div>
  <div id="cat_list">
  </div>
  <script src="cat-clicker.js"></script>
</body>
</html>

猫clicker.js

function catClick(){
    var cat_span = document.getElementById("cat_span");
    var number = cat_span.innerHTML;
    number++;
    cat_span.innerHTML = number;
}

function listClick(name, id_num){
    document.getElementById("cat_div").innerHTML = '<p id="cat_name_'+name+'">'+name+'</p>\
                     <img id="cat_img_'+id_num+'" src="cat.jpg">';
}


var Cat = function(input_name, id_num) {
    var name = input_name;
    var id_num = (function() {
        var id = 0;
        return function() { return id++; };
    })();
    var cat_list = (function(name, id_num){
        var list = [];
        return function() {list.append([name, id_num])};
    })(name, id_num);
    document.getElementById("cat_list").innerHTML += '<p id="cat_list_'+name+'">'+name+'</p>';
    // var new_list = document.getElementById("cat_list_"+name);
    // new_list.addEventListener('click', catClick, false);
    //THIS IS WHERE THE PROBLEM IS=====
    (function(name, id_num){
        var new_list = document.getElementById("cat_list_"+name);
        return function() {new_list.addEventListener('click', catClick, false)};
    })(name, id_num);
    //=====
    var div = document.createElement('div');
    document.getElementById("cat_div").innerHTML = '<p id="cat_name_'+name+'">'+name+'</p>\
                     <img id="cat_img_'+id_num+'" src="cat.jpg">';
    var new_cat = document.getElementById("cat_img_"+id_num);
    new_cat.addEventListener('click', catClick, false);

};

var cat_0 = new Cat('Kitty');
var cat_1 = new Cat('Cat');

Answer 1

您正在返回一个函数，并且永远不会调用该函数。

(function(name, id_num){
    var new_list = document.getElementById("cat_list_"+name);
    return function() {new_list.addEventListener('click', catClick, false)};  <-- does nothing
})(name, id_num);

应该只是

(function(name, id_num){
    var new_list = document.getElementById("cat_list_"+name);
    new_list.addEventListener('click', catClick, false);
})(name, id_num);

通过编写代码的方式，甚至不需要包含它的函数。

Answer 2

此外，您只有一张猫图片，因为您覆盖了第一张图片：

document.getElementById("cat_list").innerHTML = '<p id="cat_list_'+name+'">'+name+'</p>';

将=更改为+ =。

关闭时单击事件监听器的难度

2 个答案: