Javascript 选择后更新div背景色
我最近得到了一个YouTube视频播放脚本,我一直在编辑它以增强我的jquery能力(我是初学者)。我刚刚开始注意到它是如何在不刷新的情况下进行更新的。无论如何,这个视频播放脚本给了我一个视频列表,在右边可以选择,它将播放视频。但是,我正在尝试使其达到这样的效果:如果您单击侧面的视频,它将突出显示显示已单击视频缩略图的div,并将突出显示的div更改为下一个单击的div。这是我的密码Javascript 选择后更新div背景色,javascript,jquery,html,Javascript,Jquery,Html,我最近得到了一个YouTube视频播放脚本,我一直在编辑它以增强我的jquery能力(我是初学者)。我刚刚开始注意到它是如何在不刷新的情况下进行更新的。无论如何,这个视频播放脚本给了我一个视频列表,在右边可以选择,它将播放视频。但是,我正在尝试使其达到这样的效果:如果您单击侧面的视频,它将突出显示显示已单击视频缩略图的div,并将突出显示的div更改为下一个单击的div。这是我的密码 <script type="text/javascript" src="http://ajax.goog
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000; height: 440px; margin: 0 auto; margin-top: 100px;">
<?php $youtube=s implexml_load_file( 'http://gdata.youtube.com/feeds/api/videos?alt=rss&orderby=published&author=1v1lb'); $first=$ youtube->channel->item[0]; ?>
<!-- Playlist with thumbnails -->
<div class="rightcontent">
<div id="videoheader"><span style="color: #FFFFFF;">Uploads From 1v1LB</span>
</div>
<div class="scrollbar" id="simple">
<ul id="videolist" style="list-style-type: none; padding: 0; margin: 0; background: #1B1B1B;">
<?php foreach ($youtube->channel->item as $item) { ?>
<li style="cursor:pointer;">
<div id="video" onclick="play('<?php echo basename($item->guid); ?>');$(this).css({ backgroundColor: " red " });">
<img src="<?php echo $item->children('media', true)->group->children('media',true)->thumbnail->attributes()->url; ?>" style="vertical-align: middle" width="75" height="50">
<?php echo basename($item->title); ?>
</div>
</li>
<?php } ?>
</ul>
</div>
</div>
<!-- Video Player Box -->
<div id="ytapiplayer" style="width: 620px; height: 480px;">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
</div>
<script type="text/javascript">
var params = {
allowScriptAccess: "always",
allowfullscreen: "true"
};
var atts = {
id: "myytplayer"
};
swfobject.embedSWF("http://www.youtube.com/e/<?php echo basename($first->guid); ?>?enablejsapi=1&playerapiid=ytplayer?rel=0&autoplay=1",
"ytapiplayer", "640", "480", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
}
function play(videoid) {
if (ytplayer) {
ytplayer.loadVideoById(videoid);
}
}
</script>
</body>
</html>
频道->项目[0];?>
从1v1LB上传
-
<div id="video" onclick="play('<?php echo basename($item->guid); ?>');$(this).css({ backgroundColor: " red " });">
<div id="video" onclick="play(this, '<?php echo basename($item->guid); ?>');">
function play(el, videoid) {
if (ytplayer) {
ytplayer.loadVideoById(videoid);
}
$(el).css('background-color', 'red');
}
<!-- list with videos -->
<div class="video" onclick="play(this, '<?php echo basename($item->guid); ?>');">
<div class="video" onclick="play(this, '<?php echo basename($item->guid); ?>');">
<div class="video" onclick="play(this, '<?php echo basename($item->guid); ?>');">
function play(el, videoid) {
if (ytplayer) {
ytplayer.loadVideoById(videoid);
}
// reset background-color for all divs which has class video
$('.video').css('background-color', '');
// set background for current element
$(el).css('background-color', 'red');
}