javascript - 许多来自 JSON 的 href，在切换单击时会出现不同的 id

Question

我有一个包含影院电影的 JSON 文件。我想在单击很多电影标题时显示正确电影的信息。我的代码无法正常工作，但我能够使所有电影在点击时显示，无论是什么电影。

我希望能够单击“安德的游戏”，然后使信息 div 仅显示有关该电影的信息。我的代码如下:

JavaScript:

$(document).ready(function() {
    $.getJSON('json/store.json', function(results) {
       //Get movie title
        for (var i = 0; i < results['results'].length; i++) {
            var title = '<p><a href="#">' + results['results'][i].title + '</a></p>';
            $('#movies').append(title);
         }





        for (var i = 0; i < results['results'].length; i++) {
            var title = $('#info').append("<p class='biohus'>" + results['results'][i].title + "</p>");
            var img = $('#info').append("<img id='myndbio' width='200' height='300' class='img' src =" + results['results'][i].image + ">");
            }




$('.title').click(function(){ 
    $(this).parent().find('#info').slideToggle("slow");
});


$('.title').click(function(){ 
    var dataMovieId = $(this).attr('data-movie-id');
    $('#'+dataMovieId).slideToggle("slow");
});

});
});

HTML:

<div id="bio" class = "content">
        <center><h1 class="cinemaheadline">Myndir í bíó</h1></center>
        <?php include 'php/curl.php';?>

        <div id="movies" class="movies">
            <!-- Movies -->
        </div>

        <div id="info" class="info">
            <!-- info -->
        </div>
    </div>

和 php 用于连接 api:

   <?php
//check if you have curl loaded
if(!function_exists("curl_init")) die("cURL extension is not installed");
//url
$url = 'http://apis.is/cinema';
$storejson = 'json/store.json';
//skrifa
$fw = fopen($storejson, 'w'); 
//start curl
$ch=curl_init($url);
//set options
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//execute
$r=curl_exec($ch);
//close curl
curl_close($ch);

$arr = json_decode($r,true);
fwrite($fw, json_encode($arr, TRUE));
?>

Answer 1

您遇到的主要问题是您需要某种方式将标题与信息链接起来。要么将每部电影的标题和信息包装在自己的 div 中，要么使用某些属性(数据电影)并为其指定一个可以将标题和信息关联起来的名称或编号。

如果第一种方式你需要做类似的事情

$('.title').click(function(){ 
    $(this).parent().find('.info').slideToggle("slow");
});

第二种方式类似于；

$('.title').click(function(){ 
    var dataMovieId = $(this).attr('data-movie-id');
    $('#'+dataMovieId).slideToggle("slow");
});

最后，你不应该像现在这样使用 ids。例如，您将输出具有相同 id 的 img 标签。一个 id 只能在一个页面上使用一次。

编辑:完整代码；

$(document).ready(function() {
    $.getJSON('json/store.json', function(results) {
        for (var i = 0; i < results['results'].length; i++) {
            // title link. note the data-id attr which is i, which we will put into the movie info, to tie them together
            var title = '<p><a href="#" data-id="'+i+'">' + results['results'][i].title + '</a></p>';

            // info section
            var infoTitle = "<p class='biohus'>" + results['results'][i].title + "</p>";
            var infoImg = "<img id='myndbio' width='200' height='300' class='img' src =" + results['results'][i].image + ">";
            // wrap title and image in a div with the data-id attr and i
            var info = '<div class="movie-info data-id="'+i+'">'+infoTitle+infoImg+'</div>';

            // place both title and info sections in the right spots
            $('#movies').append(title);
            $('#info').append(info);
         }
    });

    // set up click handlers
    $('#movies a').click(function(){
        // find data id of clicked movie
        var id = $(this).attr('data-id');
        // find movie info with correct id and show
        $('#info .movie-info[data-id="'+id+'"]').slideToggle("slow");
    });

});