当用户点击 <p> 元素时更新 <div>？答案

【问题标题】：Update a <div> when the user clicks on a <p> element?当用户点击 <p> 元素时更新 <div>？
【发布时间】：2012-04-26 02:02:51
【问题描述】：

我有 HTML 代码：

<div id=ytVid>
    <iframe width="420" height="315" src="http://www.youtube.com/embed/5EdmHSTwmWY" frameborder="0" allowfullscreen></iframe>
    <script type="text/javascript" src="js/youtube.js"></script>
</div>

目前，我有一组由 jQuery 使用数组生成的段落。

我希望发生的是，当用户单击生成的段落之一时，这将从 youtube.js 文件中启动此代码：

$(document).ready(function() {
    function openLink(evt) {
        var search = evt.target.innerHTML;
        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>";
                        $("#ytVid").html(video_frame); 
                    });
                } else {
                    $("#ytVid").html("<div id='no'>No Video</div>");
                }
            }
        });
    };
});

我不知道上面的代码是否正确，但它应该做的是使用数组中的内容（如果可能）或段落中的内容来搜索 youtube 的视频以更新 ytVid div。

谢谢

【问题讨论】：

不推荐点击<p> 项目。尝试使用<a>。（虽然我看不到你的<p> 标签）
那好吧。 [这里] (jsfiddle.net/SamsJavaStuff/PADL9) 是我的代码。它是 Javascript 文件的简化副本，但我不知道为什么它不能在小提琴中工作

标签： javascript jquery html youtube

【解决方案1】：

在 JavaScript jsfiddle 的“简化”副本中，字符串包含在括号中，表示它们是数组。您也没有选择要包含的 jQuery。

http://jsfiddle.net/PADL9/1/

这是一个添加了上面的JS的

http://jsfiddle.net/PADL9/2/

（删除警报/返回以使 AJAX 工作）

【讨论】：

您好，感谢您的回复。这是一个很好的回复！我已在其中添加了此代码，并且警报有效。一旦我删除它们，虽然它不会更新 youtube 视频......