点击事件监听器关闭困难

Question

我目前正在Udacity课程“ JavaScript设计模式”上工作，而我尴尬的题名“ Cat Clicker”遇到了一些麻烦。 您应该能够单击列表中的猫名之一，它应该增加“猫数”范围。 我似乎无法使click事件监听器针对“ 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>

cat-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 个解决方案

解决方案1
1 已采纳 2015-01-08 19:59:00

解决方案2
1 2015-01-08 20:12:31

点击事件监听器关闭困难

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-01-08 19:59:00

解决方案2 1 2015-01-08 20:12:31

解决方案1
1 已采纳 2015-01-08 19:59:00

解决方案2
1 2015-01-08 20:12:31