0

我想单击一个 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 + "&amp;auto_play=false&amp;auto_advance=false&amp;buying=false&amp;liking=false&amp;download=true&amp;sharing=true&amp;show_artwork=true&amp;show_comments=false&amp;show_playcount=true&amp;show_user=true&amp;start_track=0&amp;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/

4

1 回答 1

0

当你这样做时,$('#player_son').show();你必须找到div你点击的内部元素。你可以这样做$(this).find('a').html()

替换你$('#player_son').show();$ ('#player_son').html($(this).find('a').html()).show();

于 2013-06-14T11:07:07.537 回答