Question

我想点击一个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/

Answer 1

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

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

显示/隐藏与第一个链接的var的div

1 个答案: