關閉時點擊事件監聽器的難度

我目前正在研究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

關閉時點擊事件監聽器的難度

回答

相關問題