我有一个电影院里有电影的JSON文件。当我单击很多电影名称时,我想使信息显示在正确的电影中。我的代码不起作用,但是无论什么电影,我都能使所有电影都点击显示。
我希望能够单击,例如“ Ender's Game”,然后使info 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));
?>
最佳答案
您在这里遇到的主要问题是,您需要某种方式将标题与信息链接起来。可以将每部电影的标题和信息都包装在自己的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");
});
});
关于javascript - 来自JSON的许多href,在切换点击时会显示不同的ID,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20059138/