许多来自JSON的hrefs，在切换时单击会显示diffrent id

Many a hrefs from JSON, on toggle click make diffrent id appear

本文关键字：单击 显示 id diffrent JSON hrefs 许多      更新时间：2023-09-26

我有一个JSON文件，里面有影院里的电影。当我点击电影标题时，我想让信息显示在正确的电影上。我的代码不起作用，但我可以让所有的电影都在点击时出现，无论是什么电影。

我希望能够点击，比方说，"Ender的游戏"，然后让infodiv只显示关于那部电影的信息。我的代码在下面：

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));
?>

这里的主要问题是您需要某种方式将标题与信息链接起来。可以将每个电影的标题和信息封装在自己的div中，也可以使用一些属性（数据电影）并为其提供一个名称或数字，以便将标题和信息关联起来。

如果第一种方法是你需要做一些类似的事情

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

第二种方式是类似的；

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

最后，你不应该像现在这样使用id。例如，您将输出具有相同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");
    });
});
相关文章：