Ползунок JQuery прерывается при втором щелчке миниатюры

Question

У меня есть постоянная проблема с панелью слайдера видео (с использованием уложенных фреймов и z-index), которая ломается при щелчке миниатюры во второй раз. Я искал высоко и низко для решения, но застрял; все, что я пробовал, не сработало.

Живой сайт http://www.nishasamuel.com. Когда вы нажимаете на миниатюру, вы прокручиваетесь до верхней части страницы, а новое видео исчезает сверху, используя z-index. Это нормально, но если вы нажмете на выбранный в данный момент миниатюру, то второй раз он разрывается на главной панели вверху.

Итак, лучшая идея, с которой я столкнулся, но я стараюсь правильно ее реализовать, заключается в том, чтобы пометить миниатюру «текущим» классом, как только она была нажата. Затем, если он снова щелкнут, оператор if в функции JQuery может помешать повторной работе функции, тем самым обойдя проблему. Но как это сделать? Я думаю, что я близок к строкам, которые прокомментированы ниже, но я не совсем там, борется с тем, как активировать функцию щелчка на выбранном эскизе, когда другой клик. Вероятно, это просто недостаток опыта 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&amp;byline=0&amp;portrait=0&amp;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&#8217;s TV Advert</h3> 
          <p id="paragraph">St. Mungo&#039;s Christmas TV Ad &quot;When You&#039;ve Lost Everything&quot;</p> 
         </div> 
         <iframe id="player" src="//player.vimeo.com/video/81405012?title=0&amp;byline=0&amp;portrait=0&amp;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&amp;byline=0&amp;portrait=0&amp;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&#8217;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&#8217;s TV Advert" title="St. Mungo&#8217;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 там :-)

Благодаря

Answer 1

Решенный, наконец. Он просто взял хорошо помещается «если не ...» проверить, что текущий эскиз не был выбран (т.е. имел «выбранный» класс) перед запуском Z-индекс Переключение функции по:

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

Надеюсь, это сэкономит кому-то с той же проблемой несколько головных болей в будущем.