类名的事件处理程序无法正常工作

Question

这是我正在尝试做的事情：

让用户创建类别（完成）
将该类别添加到本地存储（完成）
将该类别添加到屏幕上的列表中（完成）
将事件附加到该类别，这样当用户单击它时，它将显示该类别中的所有帖子。

我想要 1 个函数（或事件监听器，随便你怎么称呼它）来处理所有的点击。它必须知道它必须针对哪个类别对一些帖子进行排序，这就是我遇到的问题。
这是我执行第 1 步和第 2 步的代码：

    document.getElementById("newCategoryButton").onclick = function () 
    {
    var input = document.getElementById("newCategoryInput");

    var li = document.createElement('li');
    li.innerHTML = "<a href='#' id='sort" + input.value + "'>" + input.value + "</a></li>";
    localStorage.setItem(input.value, input.value);
    document.getElementById("categories").appendChild(li);

    }

这是第 3 步的代码。重要的事情发生在 else

 for (var i = 0, len = localStorage.length; i < len; ++i) {
            if (localStorage.key(i).indexOf("formObject") > -1) {
                var value = JSON.parse(localStorage.getItem(localStorage.key(i)));
                addRow(value);
            } else {
                var li = document.createElement('li');
                li.className = "category";
                li.innerHTML = "<a href='#' id='sort" + localStorage.getItem(localStorage.key(i)) + "'>" + localStorage.getItem(localStorage.key(i)) + "</a></li>";
                document.getElementById("categories").appendChild(li);

这是第 4 步的代码：

var categories = document.getElementsByClassName("category");
for (var i = 0; i < categories.length; ++i) {
    categories[i].addEventListener("Click", SortPosts(categories[i].textContent));
}

function SortPosts(value)
{
    alert(value);
    //Sort coding here
}

当页面加载时，它会自动提醒 SortPosts() 的值，而无需单击任何内容。我的代码有什么问题？另外，我是在给所有类别点击事件，还是我也做错了？

Answer 1

试试这个，你可以在调用函数后获取textContent。

function MyEvents(){
var categories = document.getElementsByClassName("category");
for (var i = 0; i < categories.length; ++i) {
    categories[i].addEventListener("click", SortPosts,false);
}
}
function SortPosts(){
    alert(event.target.textContent);
    //Sort coding here
} 
window.onload=MyEvents;

<div class="category">Click for category one</div>
<div class="category">Click for category two</div>

Answer 2

在线：

 categories[i].addEventListener("Click", SortPosts(categories[i].textContent));

您正在调用函数排序帖子并将结果绑定到点击事件。试试这个：

categories[i].addEventListener("Click", function(i){
    return function(){
         SortPosts(categories[i].textContent);
    }
}(i));

注意 i 变量周围的闭包以将其保留在范围内

编辑：提交后我想到了，虽然代码相当紧凑，但不是特别容易阅读，尤其是如果你不熟悉闭包的话，所以这里有一个稍微更冗长、更容易阅读的版本:

categories[i].addEventListener("Click", getPostSorter(i));


function getPostSorter(i) {
    return function(){
         SortPosts(categories[i].textContent);
    }
}

类名的事件处理程序无法正常工作

Eventhandler for classnames is not working correctly

html

javascript

loops