如何在PHP中使用javaScript变量？
如何在PHP中使用javaScript变量？
提问于 2011-12-19 19:12:07
我目前拥有的是一个简单的Facebook应用程序，它可以从YouTube频道获取视频信息。
刚才，我将YouTube响应的第一个视频连同标题、视图和描述一起嵌入到占位符中，所有视频(包括第一个)都会显示在包含嵌入视频的div下面。
然后，当用户单击任何视频缩略图时，该视频就会嵌入到占位符div中。
我可以通过在YouTube关联数组中硬编码视频的id来实现这一点，但是我不知道如何在jQuery代码的最后一行中使用id变量。
下面是我当前的代码：
$url = 'http://gdata.youtube.com/feeds/api/videos?max-results=20&alt=jsonc&orderby=published&format=5&safeSearch=none&author=CHANNELID&v=2';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_REFERER, $url);
$body = curl_exec($ch);
curl_close($ch);
$data = json_decode($body, true);
?>
<div id="placeholder" style="font-family:Helvetica; max-width:500px; margin:0 0 20px 0;">
<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][0]['id']; ?>" frameborder="0" allowfullscreen></iframe></div>
<div class="title" style=" font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $data['data']['items'][0]['title']; ?> </div>
<div class="views" style="color:#BBB; font-size:12px;"><?php echo $data['data']['items'][0]['viewCount'];?> views</div>
<div class="description" style="font-size:14px;"><?php echo $data['data']['items'][0]['description'];?></div>
<div class="hr" style="padding:5px 0 0 0; float:left; border-bottom: 1px solid #96CC90; width:480px;"></div>
</div>
<?php
foreach($data['data']['items'] as $item) {
$id = $item['id'];
$description = $item['description'];
$description = str_replace('uk.opticalexpress.com', '', $description);
$description = str_replace('-', '', $description);
$description = trim($description);
$thumb = $item['thumbnail']['sqDefault'];
$i = 0;
?>
<div class="video" id="<?php echo $i; ?>" style="font-family:Helvetica; float:left; max-width:150px; min-height:130px; margin:0 0px 20px 10px;">
<div class="thumb" style="position:relative; left:0; top:0;">
<img src="<?php echo $item['thumbnail']['sqDefault'];?>" title="<?php echo $description;?>" style="position:relative; top:0; left:0px;"/>
<img src="../images/play-thumb.png" style="position:absolute; top:30px; left:45px;"/>
</div>
<div class="title" style="font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $item['title']; ?> </div>
<div class="views" style="font-size:12px;"><?php echo $item['viewCount'];?> views</div>
</div>
<?php
$i++;
}
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.video').click(function() {
var id = $(this).attr('id');
$('#placeholder').fadeOut('slow');
$('#placeholder').html('<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][1]['id']; ?>" frameborder="0" allowfullscreen></iframe></div>');
$('#placeholder').fadeIn('slow');
});
});
</script>很抱歉这堵墙的文字(和内联css)！
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-12-19 20:42:18
困难..。我会用jQuery在.video上观看点击事件，然后对服务器(RESTish)上的一个PHP文件执行GET请求，这将生成iframe所需的HTML，然后将#video html设置为您刚刚收到的html。也许能行得通。
另一种可能是加载所有的iframe，然后在.video上点击只显示与相同的唯一id匹配的iframe。不过，这意味着用户需要更多的加载时间，最好使用AJAX类型的方法。
Stack Overflow用户
发布于 2011-12-19 21:44:35
你可以通过这样做来使用ajax，我已经这样做了，希望这也能为你工作。
<div id="video1" class=".temp"></div>
<script type="text/javascript">
$(document).ready(function() {
$('.temp').click(function() {
var currentId = $(this).attr('id');
showVideo(currentId);
});
};
function showVideo(str)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("VideoFrameDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","inc/AjaxOnClickValues.php?id="+str,true);
xmlhttp.send();
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8560464
复制相关文章
相似问题
腾讯云开发者
