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。点击处理程序的注册已移出循环。

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");*/
        });

来自localStorage中listview的商店ID

3 个答案: