当点击链接时,我也在尝试制作一个无需重新加载页面即可加载 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 很陌生,我应该早点说。