Question

因为我的另一个问题，没有解决我的问题，我尝试了所有我知道的事情，而且每次我都陷入困境。请将此问题与我的其他问题结合起来

我正在构建我的电影库。我有两个页面，index和movie.html。 Index.html将显示一个页面，其中将显示电影项目，每个项目，将有一个名称，图片，分数，简短摘要和导演和剧本名称。而且，如果电影是基于，我也将有一个作者的名字书。所有这些都取自我在本地创建的JSON文件。

在其他html页面中，movie.html，我计划有更多花哨的设计和更多信息。喜欢：胜利，故事大纲，演员和他们的角色等。

但这是我面临的问题。

我尝试过：

到目前为止，我有这个的index.html

$( document ).ready( function () {

$.getJSON( "js/appjson.json", function ( data ) {
    for ( var i = 0; i < data.length; i++ ) {

        for ( var key in data[ i ] ) {

            if ( key === "novel" ) {
                $( '#jsonLoad' ).append( '<a href="movies.html?id='+data[i].id'" class="itemsHolder">' +
                "<div class="titleHolder">" +
                "<h2>" + data[ i ].name + "</h2>" +
                "</div>" +
                "<div class="novelAuthor">" +  "<p class="NovelTxt">" + "Novel by" + " " + data[ i ].novel +"</p>" + "</div> " +
                "<div class="posterHolder">" + data[ i ].posterPath + "</div>" +
                "<div class="summaryShort">" + data[ i ].summary + "</div>" +
                "<div class="raiting"><p>" + data[ i ].imdb + "</p></div><div class="genderMovie"> " + data[ i ].gender + "</div> " +
                "<div class="directorNdScreen">" + 'Directed by ' + " <p class="director">" + data[ i ].director + '</p>' + '  ' + ' Screenplay by ' + "<p class="screenplay">" + data[ i ].screenplay + "</p>" + "</div>"


                + "</a>" )
            }

        }
        if(!data[i].novel){
            $( '#jsonLoad' ).append( '<a href="movies.html?id='+data[i].id+'" class="itemsHolder">' +
            "<div class="titleHolder">" +
            "<h2>" + data[ i ].name + "</h2>" +
            "</div>" +
            "<div class="posterHolder">" + data[ i ].posterPath + "</div>" +
            "<div class="summaryShort">" + data[ i ].summary + "</div>" +
            "<div class="raiting"><p>" + data[ i ].imdb + "</p></div><div class="genderMovie"> " + data[ i ].gender + "</div> " +
            "<div class="directorNdScreen">" + 'Director by ' + " <p class="director">" + data[ i ].director + '</p>' + '  ' + ' Screenplay by ' + "<p class="screenplay">" + data[ i ].screenplay + "</p>" + "</div>"


            + "</a>" )
        }

     }
   } )

 } );

我的JSON文件，我有20个对象，我只会发布2个。

[

 {
"id": 1,
"name": "Harry potter and the Sorcerer's Stone",
"year": 2001,
"movieStill" : " <img    src='imgsMovie/HP1/StillPhoto/StillPhotoBackground.jpg'/>",\
 },
 {
"id": 2,
"name": "Harry potter and the Chamber of Secrets ",
"year": 2001,
"movieStill" : " <img    src='imgsMovie/HP2/StillPhoto/StillPhotoBackground.jpg'/>",\
 }
 ]

我的movie.html看起来像这样。

$( document ).ready( function () {

$.getJSON( "js/appjson.json", function ( data ) {


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

                $( '.MovieInfo' ).append(
                    "<div class="imgStill">" + data[ i ].movieStill + "</div>"
                )



    }
} );


} );

我知道在我的movie.html中我循环了每个对象。我如何编写一个if语句，它将使每个具有自己id的对象，并显示那里有什么。

在这里，当我点击Harry potter 1项目时，我得到了两张来自hp1和hp2的图片，我只想显示我点击的项目中的一个值。这也意味着其他属性，如不同的导演等，仅举几例。

Answer 1

看起来在你的movie.html中，你只是将图像附加到.MovieInfo，它不会将它们分开，而是将它们全部集中在一起。您可以改为从data参数中读取id，并仅显示与您单击的影片关联的ID。

由于您已经将GET查询传递给url（movies.html？id =），因此您可以从GET查询中获取id的值并从中开始（现在让我们将其称为getID（））。然后使用if语句包装.MovieInfo append语句，检查该值的数据参数。

$.getJSON( "js/appjson.json", function ( data ) {
    for ( var i = 0; i < data.length; i++ ) {
        if (data[i].id === getID()) {
            $( '.MovieInfo' ).append(
                "<div class="imgStill">" + data[ i ].movieStill + "</div>"
            )
        }
    }
});

根据ID

1 个答案: