gpt4 book ai didi

javascript - 选择后更新div背景颜色

转载 作者:行者123 更新时间:2023-11-28 00:49:28 25 4
gpt4 key购买 nike

我最近得到了一个 YouTube 视频播放脚本,我一直在编辑它以增强我的 jquery 能力(我是初学者)。我刚刚开始注意到它如何能够在不刷新的情况下进行更新。不管怎样,这个视频播放脚本在右边给了我一个视频列表供我选择,它会播放视频。但是,我试图做到如果您单击侧面的视频,它将突出显示显示单击的视频缩略图的 div,并将突出显示的 div 更改为下一个单击的那个。这是我的代码

 <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>

在我尝试这样做之前,代码运行得很好。困惑的部分是:

<div id="video" onclick="play('<?php echo basename($item->guid); ?>');$(this).css({ backgroundColor: " red " });">

出于某种原因,一旦我添加了第二个 onclick 函数,整个事情就会变得困惑,我什至无法再单击视频。有人可以帮忙吗?

最佳答案

<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');
}

关于javascript - 选择后更新div背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26941782/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com