Question

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

例如，如果我有案例研究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合并

1 个答案: