我的视频滑块面板（使用堆叠的iframe和z-index）存在问题，当第二次点击缩略图时会出现问题。我已经搜索了高低的解决方案但是卡住了;我尝试过的一切都没用。
直播网站为http://www.nishasamuel.com。当您单击缩略图时，您将滚动到页面顶部，新视频将使用z-index在顶部淡入。没关系，但是如果你第二次点击当前选中的缩略图，它会在顶部的主面板中断开。
所以我提出的最好的想法，但我正在努力正确实现，就是一旦点击它就立即用'当前'类标记缩略图。然后，如果再次单击它，JQuery函数中的if语句可以阻止该函数再次运行，从而避免问题。但是怎么做呢？我认为我接近下面列出的行，但我不在那里，在另一个缩进时，如何重新激活所选缩略图上的点击功能。这可能仅仅是因为我缺乏JQuery专业知识。我真的试过了： - /
这是JQuery代码：
<script type="text/javascript">
function selectWsImage(controlElement, fadeSpeed) { // find this thumbnail's image and display it in the content panel
var targetId = controlElement.attr('data-toggle');
var $selectedItem = $('#video_gallery_panel li.selected');
var $targetItem = $(targetId);
//if (!$targetItem.hasClass('current')) {
//$targetItem.removeClass('current');
$selectedItem.removeClass('selected').css('z-index', 2);
$targetItem.addClass('selected').hide().css('z-index', 3).fadeIn(fadeSpeed, function() {
$selectedItem.css('z-index', 1);
});
//$targetItem.addClass('current');
//}
}
wsGalleryFadeInterval = 1000;
$(document).ready(function(){
$('#homepage_top_right_panel a').click( function(event) {
$("html, body").animate({ scrollTop: "180px" });
event.preventDefault();
selectWsImage($(this), wsGalleryFadeInterval);
});
})
</script>
...以及HTML的相关摘录（如果需要，请随时查看以上链接的来源）：
<ul id="video_gallery_panel">
<li id="video_feature_post1" class="selected">
<div id="video_panel">
<div id="video_panel_text">
<h5 id="heading1" class="motion_graphics">Motion Graphics</h5>
<h3 id="heading2">Motion Graphics Showreel</h3>
<p id="paragraph">Highlights of exciting motion graphics projects and animation work I have been involved in.</p>
</div>
<iframe id="player" src="//player.vimeo.com/video/43499006?title=0&byline=0&portrait=0&color=42a1b2" width="720" height="405" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position:absolute; margin-top:-400px;"></iframe>
</div><!-- end video_panel -->
</li>
<li id="video_feature_post2">
<div id="video_panel">
<div id="video_panel_text">
<h5 id="heading1" class="vfx">VFX</h5>
<h3 id="heading2">St. Mungo’s TV Advert</h3>
<p id="paragraph">St. Mungo's Christmas TV Ad "When You've Lost Everything"</p>
</div>
<iframe id="player" src="//player.vimeo.com/video/81405012?title=0&byline=0&portrait=0&color=ff4a61" width="720" height="405" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position:absolute; margin-top:-400px;"></iframe>
</div><!-- end video_panel -->
</li>
<li id="video_feature_post3">
<div id="video_panel">
<div id="video_panel_text">
<h5 id="heading1" class="motion_graphics">Motion Graphics</h5>
<h3 id="heading2">Doctor Care Anywhere</h3>
<p id="paragraph">A video animation for a new online medical service. I received this video from my client which I had to revise the characters in the animation and create and replace a section seamlessly to make the animation more relevant to their business. </p>
</div>
<iframe id="player" src="//player.vimeo.com/video/78800579?title=0&byline=0&portrait=0&color=42a1b2" width="720" height="405" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position:absolute; margin-top:-400px;"></iframe>
</div><!-- end video_panel -->
</li>
</ul>
<div class="clear"></div>
<div id="homepage_top_right_panel" class="selected">
<h5 class="motion_graphics">Motion Graphics</h5>
<h4>Motion Graphics Showreel</h4>
<div id="bg_motion_graphics">
<a href="#" data-toggle="#video_feature_post1"><img width="220" height="124" src="http://www.nishasamuel.com/wp-content/uploads/2013/10/motion-graphics-showreel.jpg" alt="Motion Graphics Showreel" title="Motion Graphics Showreel video sample" class="motion_graphics" /></a>
</div><!-- end homepage_top_right_panel -->
</div>
<div id="homepage_top_right_panel">
<h5 class="vfx">VFX</h5>
<h4>St. Mungo’s TV Advert</h4>
<div id="bg_vfx">
<a href="#" data-toggle="#video_feature_post2"><img width="220" height="124" src="http://www.nishasamuel.com/wp-content/uploads/2015/03/mungoes.jpg" alt="St. Mungo’s TV Advert" title="St. Mungo’s TV Advert video sample" class="vfx" /></a>
</div><!-- end homepage_top_right_panel -->
</div>
<div id="homepage_top_right_panel">
<h5 class="motion_graphics">Motion Graphics</h5>
<h4>Doctor Care Anywhere</h4>
<div id="bg_motion_graphics">
<a href="#" data-toggle="#video_feature_post3"><img width="220" height="124" src="http://www.nishasamuel.com/wp-content/uploads/2013/11/dca.jpg" alt="Doctor Care Anywhere" title="Doctor Care Anywhere video sample" class="motion_graphics" /></a>
</div><!-- end homepage_top_right_panel -->
</div>
希望有人可以提供帮助 - 我知道那里有很多JQuery专家： - ）
由于
答案 0 :(得分：0)
终于解决了。它只是在运行函数的z-index切换之前检查了当前缩略图是否已被选中（即具有'selected'类），这是一个很好的“if not ...”检查：
if (!$targetItem.hasClass('selected')) {...}
完整的功能现在是：
function selectWsImage(controlElement, fadeSpeed) { // find this thumbnail's image and display it in the content panel
var targetId = controlElement.attr('data-toggle');
var $selectedItem = $('#video_gallery_panel li.selected');
var $targetItem = $(targetId);
if (!$targetItem.hasClass('selected')) {
$selectedItem.removeClass('selected').css('z-index', 2);
$targetItem.addClass('selected').hide().css('z-index', 3).fadeIn(fadeSpeed, function() {
$selectedItem.css('z-index', 1);
});
}
}
wsGalleryFadeInterval = 1000;
$(document).ready(function(){
$('#homepage_top_right_panel a').click( function(event) {
$("html, body").animate({ scrollTop: "180px" });
event.preventDefault();
selectWsImage($(this), wsGalleryFadeInterval);
});
})
希望这可以为将来遇到同样问题的人带来一些麻烦。