Question

尝试从catListView.render（）中的model.data调用一个数组，它显示完美，但是如何使数组项可单击（例如点击cat0或点击cat2）。

$(function () {
var model = {
    data: ["cat0", "cat1", "cat2", "cat3"],
}

var oct = {
    init: function () {
        catList.init();
    },
    getCat: function () {
        return model.data;
    },
};

var catListView = {
    init: function () {
        this.$catList = $("#cat-list");
        catList.render();
    },
    render: function () {
        var catList = this.$catList.html('');

        var cats = oct.getCat();

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

            var li = "<li>" + cat + "</li>";
            addEventListener(li, "click", function(){                    
                console.log(this.li.text());
            });
            catList.append(li);
        }
    }
};

oct.init();
}());

Answer 1

使用纯DOM时，应使用EventTarget.addEventListener（）将eventListener绑定到EventTarget（请参阅https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener以供参考）。

所以在你的代码中它将是：

var li = document.createElement('li'); // create an element instead if string

li.innerText = cat;

li.addEventListener("click", function(){                    
    console.log(li.innerText);
});

请注意，您还需要创建一个DOM元素来将事件绑定到。

Answer 2

您键入的代码无法运行...我会猜测您想要的内容 -

$li.bind("click", function() {
  console.log("way 2", $(this).index());
});

https://codepen.io/linjiyeah/pen/QvzVQN

获取单击数组项

2 个答案: