Question

这就是我想要做的事情：

让用户创建类别（已完成）
将该类别添加到本地存储（已完成）
将该类别添加到屏幕上的列表（已完成）
将某个活动附加到该类别，因此当用户点击该活动时，它会显示该类别中的所有帖子。

我想要处理所有点击的1个函数（或eventlistener，无论你想调用它）。它必须知道它对某些帖子进行排序的类别，这就是我被卡住的地方这是我执行第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

就行：

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

您正在调用函数Sort posts并将结果绑定到click事件。试试这个：

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

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

编辑：提交之后它发生在我身上，而代码相当紧凑，特别容易阅读，特别是如果你不熟悉闭包，那么这里有一个稍微冗长，易于阅读的版本：< / p>

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


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

Answer 2

试试这个，你可以在调用函数后得到textContent。

＆＃13;

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;

＆＃13;

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

＆＃13;

类名的Eventhandler无法正常工作

2 个答案: