在 localStorage 中存储来自 listview 的 ID

Question

我有一个由循环创建的列表视图：

for(var i = 0; i < data.length; i++) {
    var garage = data[i];

    $("#content-p").append(
        "<ul data-role=\"listview\">" +
                "<li><a href=\"#\" id=\"submitID\" >" +
                "<h2>"+garage.location+"</h2>" +
                "<p><b>"+garage.description+"</b></p>" +
                "<p>"+garage.address+"</p>" +
            "</a></li>" +
        "</ul><br>"
    );

    $("#submitID").click(function() {
        localStorage.setItem("garageID",garage.ID);
        $.mobile.changePage("#resP");
    });

}

现在用户可以点击一个列表视图项目，该项目的 ID 应该存储在 localStorage 中。

问题：它首先创建包含所有项目的完整列表视图。如果我现在单击列表中的第 2 项，我会从最后一项中获取 ID。

Answer 1

每次循环迭代都会覆盖提交函数，并且每个 #submitID 仅调用该函数。所以，当然它只会拉出列表中的最后一个。

此外，代码会生成 data.length 中的所有项目，因此如果您不想要列表中的所有内容，则需要更改它。

这是对第一部分的修复（假设没有为 #submitID 分配样式）：

for(var i = 0; i < data.length; i++) {
    var garage = data[i];

    $("#content-p").append(
        "<ul data-role=\"listview\">" +
                "<li><a href=\"#\" id=\"submitID-" + i +  "\" >" +
                "<h2>"+garage.location+"</h2>" +
                "<p><b>"+garage.description+"</b></p>" +
                "<p>"+garage.address+"</p>" +
            "</a></li>" +
        "</ul><br>"
    );

    $("#submitID-" + i).click(function() {
        localStorage.setItem("garageID",garage.ID);
        $.mobile.changePage("#resP");
    });

}

Answer 2

我认为问题在于该方法试图在没有引用时引用车库，或类似的东西。而且您应该为特定 ID 创建 click 方法，因为它每次都会被覆盖。我为你修复了它，为一个类设置了单击方法，但每个车库元素的 ID 都是它的实际车库 ID。

http://jsfiddle.net/Fq3TF/1/

另外，提示一下，如果您正在构建一个要插入到 HTML 文档中的字符串，您可以使用撇号而不是引号来避免转义。例如"<a class='submitID'>Hello World</a>".

Answer 3

这是我对这个问题的看法。我使用属性将 id 保存在 a 元素中。点击处理程序的注册已移到循环之外。

var data = [
            {
                id: "id1",
                location: "location1",
                description: "description1",
                address: "address1"
            },
            {
                id: "id2",
                location: "location2",
                description: "description2",
                address: "address2"
            }
        ];

        for (var i = 0; i < data.length; i++) {
            var garage = data[i];

            $("#content-p").append(
                    "<ul data-role=\"listview\">" +
                    "<li><a href=\"#\" class=\"submitClass\" garageid=\"" + garage.id + "\">" +
                    "<h2>" + garage.location + "</h2>" +
                    "<p><b>" + garage.description + "</b></p>" +
                    "<p>" + garage.address + "</p>" +
                    "</a></li>" +
                    "</ul><br>"
                    );
        }

        $(".submitClass").click(function(e) {
            e.stopPropagation();
            alert($(this).attr("garageid"));

            /*localStorage.setItem("garageID", garage.ID);
             $.mobile.changePage("#resP");*/
        });