0

リンクがクリックされたときに、ページを再読み込みせずに YouTube ビデオを読み込むページを作成しようとしています。ボタンが押されたときにコードが機能し、次のようになりました。 

$(document).ready(function() {
    $(".button").click(function() {
        var search = $(".input").val();
        var keyword= encodeURIComponent(search);
        var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';

$.ajax({
        type: "GET",
        url: yt_url,
        dataType:"jsonp",
        success: function(response) {
            if(response.data.items) {
                $.each(response.data.items, function(i,data) {
                    var video_id=data.id;
                    var video_frame="<iframe width='420' height='236' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
                    $("#video").html(video_frame); 
                });
            } else {
                $("#video").html("<div id='no'>No Video</div>");
            }
        }
    });
});
});

このコードを、オンラインでフォローしたチュートリアルから変更して、リンクを作成しようとしています。次に何をすべきかわかりませんが、クラスを変更しようとしましたが、リンクから検索データを取得するときに問題が発生しました。これを改善したいのは次のとおりです。

<div id="main_section">
    <div id=ytVid>
        <iframe width="480" height="360" src="http://www.youtube.com/embed/xJ3-NnNx6Zs" frameborder="0" allowfullscreen></iframe>
    </div>
    <p id="1">Jackie Wilson - Reet Petite</p>
    <p id="2">Queen - Bohemian Rhapsody</p>
</div>

誰かが「Jackie Wilson - Reet Petite」のテキストまたはリンクをクリックすると、YouTube ビデオが更新され、クイーンの曲も更新されます。

ありがとう

編集: JavaScript ファイルを次のように変更しました。

$(document).ready(function() {
    $("#songInfo").click(function() {
    function openLink(evt) {
            var search = evt.target.innerHTML;
            var keyword= encodeURIComponent(search);
            ... rest of code ...

および HTML を次のようにします。

<p id="1" onclick="openLink(evt);"> Jackie Wilson - Reet Petite</p>
<p id="2" onclick="openLink(evt);"> Queen - Bohemian Rhapsody</p>

テキストをクリックしても何も起こらなかった 申し訳ありませんが、私は HTML の JavaScript を初めて使用します。もっと早く言うべきでした。

4

1 に答える 1

0

タグの「onclick」イベントで同じことをするのは運がいいと思います<p>-ドキュメントには、それらのタグに有効であると書かれています。このようなもの：

document.getElementById("1").onclick = "openLink(evt);";

タグのテキストが必要な場合は、次の<p>ようにしてみてください。

function openLink(evt) {
    var search = evt.target.innerHTML;
    var keyword= encodeURIComponent(search);
    ... // just like your unnamed function
}
于 2012-04-24T13:39:22.390 に答える