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

我目前正在研究Udacity课程的'Javascript设计模式'，而且我的尴尬标题为'Cat Clicker'。您应该能够点击列表中的其中一个猫的名字，它应该增加“猫的计数”范围。我似乎无法让“点击事件侦听器”为“cat_list”正常工作。一旦我把事件监听器放入一个闭包中，它就不再做任何事情。没有关闭，只有最后一只猫获得事件监听器。任何信息将不胜感激，谢谢。还有关于调试点击的信息也将被赞赏。关闭时点击事件监听器的难度

的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');

来源

2015-01-08 aaron-prindle

你是返回一个函数，而新功能永远不会被调用。

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

与该代码编写的方式，也没有必要，甚至有函数进行包装。

来源

2015-01-08 19:59:00 epascarello

非常感谢您的回复。我认为这个错误遍及我的代码，我将努力修复它。 –

而且你只有一只猫形象，因为你重写第一个图像：

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

涨跌=至+ =。

来源

2015-01-08 20:12:31 mjzr

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

回答

相关问题