Javascript <li> onclick 合并

Question

我正在尝试通过可点击的动态生成项目列表加载案例研究。但是我的问题是，虽然它正确加载它们，并且如果您单击元素，它会正确加载案例研究，但它总是加载分配的最后一个案例研究。

例如，如果我有案例研究 1、案例研究 2 和案例研究 3，单击任何选项都会转到案例研究 3。

function MakeList(array){
//Create List Element
var list = document.createElement("ul");

//For each of the Array Elements
for(var i = 0; i < array.length; i++)
{
    //Create a ListItem Element
    window["listItem" + i] = document.createElement("li");
    eval("listItem" + i).setAttribute("id", ("listItem" + i));

    //And if it exists
    if(array[i] != undefined)
    {
        //Use the array elements title variable for the text node and localize the remaining object variables
        eval("listItem" + i).appendChild(document.createTextNode(array[i].title));
        var title = array[i].title;
        var icon = array[i].icon;
        var imageOne = array[i].imageOne;
        var imageTwo = array[i].imageTwo;
        var challenge = array[i].challenge;
        var solution = array[i].solution;
        var results = array[i].results;

        //Give the ListItem some Styling
        eval("listItem" + i).style.cursor = "pointer";
        eval("listItem" + i).style.color = "blue";
        eval("listItem" + i).style.margin = "0 0 1vh 0";

        //And add the onclick function to Load the selected CaseStudy
        eval("listItem" + i).onclick = function()
        {
            RemoveContent();
            LoadCaseStudy(title, icon, imageOne, imageTwo, challenge, solution, results);
        };

        //Add to the List
        list.appendChild(eval("listItem" + i));
    }
}

//Return the List
return list;}

我试过给他们动态分配的 ID 和变量名来分隔点击调用，但没有成功。有什么建议吗？

Answer 1

在您评估 onclick 中的代码时，FOR 循环已经完成执行并且 "I" 位于数组的 .length - 1。

你应该这样做： 1. 首先在 FOR 循环的代码之外声明您的 onclick 处理程序

function handler(title, icon, imageOne, imageTwo, challenge, solution, results)
    {
        RemoveContent();
        LoadCaseStudy(title, icon, imageOne, imageTwo, challenge, solution, results);
    }

以稍微不同的方式附加处理程序：

eval("listItem" + i).onclick = handler.bind(null, title, icon, imageOne, imageTwo, challenge, solution, results);

其中 "null" 可以是表示所需执行上下文的对象。

另注不惜一切代价避免使用 "EVAL"。如果你更好地解释你的案例，我会帮助你编写没有它的代码。提供一些 HTML 示例，或解释 HTML 是如何构建的。

Javascript <li> onclick 合并

Javascript <li> onclick merged

javascript

onclick

listitem