我想单击一个 div(带有歌曲名称),然后将其替换为嵌入了播放器的新 div(播放单击的歌曲)。我的脚本可以显示/隐藏 div,但我无法从第一个获取变量来选择第二个播放器。(我从 json 文件中获取信息 - soundcloud - 其中包含item.uri
播放器代码所需的参数。
我的html:
<div id="resultats_son_div">
<input type="text" name="titre_son" size="20" maxlenght="255" id="titre_son" class="texte_titre_son" placeholder="Titre du morceau">
<div class="resultats_son" id="resultats_son"></div>
</div>
<div id="player_son" class="player_son_cache">Player I want to display</div>
我的jQuery:
$(document).ready(function() {
$("#titre_son").keyup(function(e){
var q = $("#titre_son").val();
$.getJSON("http://api.soundcloud.com/tracks.json?callback=?", {
q: q,
client_id: "4346c8125f4f5c40ad666bacd8e96498",
limit: "10"
},
function(data) {
$("#resultats_son").empty();
$.each(data, function(i,item){
var str = item.title;
var str_clean=str.replace(/'/g,"\'");
$("#resultats_son").append("<div class='titre_morceau' id='titre_morceau'><a href='#' onclick='return false;' class='lien_son' id='lien_son'>" + str_clean + "</a></div>");
// $("#player_son").append("<iframe class='iframe' width='487' height='465' scrolling='no' frameborder='no' src='https://w.soundcloud.com/player/?url=" + item.uri + "&auto_play=false&auto_advance=false&buying=false&liking=false&download=true&sharing=true&show_artwork=true&show_comments=false&show_playcount=true&show_user=true&start_track=0&callback=true'></iframe>");
});
});
});
});
$(document).ready(function() {
$('#resultats_son_div').show(); //Show first div on page load
$('#player_son').hide(); //Hide second div on page load
$('#resultats_son').click(function(){
$ ('#resultats_son_div').hide(); //Hide first div on click event
$ ('#player_son').show(); //Show second div on click event
return false;
});
});
请问我该怎么做?
看到它:http: //jsfiddle.net/cqNwe/