0

我是 jquery 的新手，我想知道你是否可以帮助我。我正在设置一个网页，该网页从 .json 文件导入前 100 个 imdb 列表，还从另一个 .json 文件导入详细信息。我已经做到了，但是我很难将本地存储与所有复选框一起使用。我希望能够通过单击复选框来存储我看过的电影，并且我希望页面再次记住它。我也是stackoverflow的新手，所以我希望我做对了。

到目前为止，这是我的 jquery 代码！

$(document).ready(function() {

    $.getJSON('movies.json', function(result) {
        $.each(result, function(index, movie){
            $.getJSON('details/' + movie.id + '.json', function(details) {

                $('#movies').append("<div class='movie' id='" + movie.id +"'>" +
                '<p><input type="checkbox" class="checkbox" id='+ movie.id + ' name="myCheckbox"/> <p id=' 
                + movie.id + '><p class="movietitle" id ='+ movie.id +'>'+ movie.title +'</p></p></p>' +

                        "<div class='info' id='" + movie.id +"'>" +
                            '<p> Country:' + details.country + '</p>' +     
                            '<p> Year:' + details.year + '</p>' + 
                            '<p> Rating:' + details.rating + '</p>' +
                            '<p> Languages:' + details.languages + '</p>' +
                            '<p> Rating:' + details.rating + '</p>' +
                            '<a class="imdb" href =" '+ details.imdburl + ' ">Skoðaðu myndina á imdb</a>' + 
                        "</div>" +  
                    "</div>"
                    );
            });
        });
    });
});
4

1 回答 1

0

抱歉，阅读后不得不重写，并意识到我在某一点上错了，可以简化一下。你快到了，但不是 id='movie.id'（或除此之外）以使其更容易，应该是 value='movie.id'。

所以：

<input type="checkbox" class="checkbox" value='+ movie.id + ' name="myCheckbox"/>

如果您想在任何时候检查/取消检查某事时获取值数组，然后将其存储：

$("input[type='checkbox']").change(function(){

 var movieIDs = $("input:checkbox:checked").map(function(){
   return $(this).val();
}).get();

 localStorage['movieList'] = JSON.stringify(movieIDs);

});

然后当您要检索时：

var movieList = JSON.parse(localStorage["movieList"]);

例如，要在加载时显示检查/观看的电影：

var movieList = (localStorage["movieList"]) ? JSON.parse(localStorage["movieList"]) : [];

$("input[type='checkbox']").each(function(){
    if($.inArray($(this).attr('id'), movieList) >= 0)
    {
        $(this).attr('checked', true);
    }           
});

在此处查看 JSFiddle（已更新）：http: //jsfiddle.net/thespacebean/SdcLr/5/

现在，如果您重新加载页面，您之前的选择仍然会显示。

于 2013-10-09T21:20:13.957 回答