使用jQuery查找可見項目

Question

我有此代碼顯示視頻播放器和該視頻的信息，並在單擊後退按鈕時隱藏它。但是，當我查看另一個視頻時，後退按鈕不會拾取哪個div第二次可見。 :visible選擇器是否必須鏈接到.live()才能確定哪個div可見？如果沒有，爲什麼它不能找到我可見的div？

jQuery('ul.projects li').click(function() { 

var videolist = jQuery(this).closest('ul'); 
var videoplayer = jQuery(videolist).prev(); 
var videoplayerID = jQuery(videoplayer).find("div:first").attr("id"); 
var filename = jQuery(this).find("img").attr("alt"); 

var infoclass = '.' + filename.replace(/ /g,''); 

    jwplayer(videoplayerID).setup({ 
    'flashplayer': '/_/jw/player.swf', 
    'id': 'playerID', 
    'width': '258', 
    'height': '145', 
    'file': '/_/videos/' + filename + '.mp4', 
    'autostart': true, 
    'events': { 
     onComplete: function(event) { 
      jQuery(videoplayer).fadeOut(function() { 
       jQuery(infoclass).fadeOut(); 
       jwplayer(videoplayerID).remove(); 
       jQuery(videolist).fadeIn(); 
      }); 
     } 
    } 
    }); 

    jQuery(videolist).fadeOut(function() { 
    jQuery(videoplayer).fadeIn(); 
    jQuery(infoclass).fadeIn(); 
    }); 

}); 

jQuery('.back-to-projects').click(function(e) { 
    e.preventDefault(); 
    var videoplayer = jQuery(this).parent(); 
    var videolist = jQuery(videoplayer).next(); 
    var videoplayerID = jQuery(videoplayer).find("div:first").attr("id"); 
    var videoinfo = '.' + jQuery(this).siblings("div:visible").not("#video-player-1_wrapper, #video-player-2_wrapper").attr("class"); 
    alert(videoinfo); 
    jQuery(videoinfo).fadeOut(); 
    jQuery(videoplayer).fadeOut(function() { 
     jwplayer(videoplayerID).remove(); 
     jQuery(videolist).fadeIn(); 
    }); 
}); 

和HTML

<div class="video-container" style="display:none;"> 
    <div id="video-player-1_wrapper" style="float:left;"></div> 
    <div class="DwightHoward" style="display:none;"><p>Dwight Howard, son.</p></div> 
    <div class="BrianDeegan" style="display:none;"><p>Brian Deegan, son.</p></div> 
    <div class="PatrickWillis" style="display:none;"><p>Patrick Willis, son.</p></div> 
    <div class="Castles" style="display:none;"><p>Castles, son.</p></div> 
    <div class="Springtime" style="display:none;"><p>Springtime, son.</p></div> 
    <div class="Powerbar" style="display:none;"><p>Powerbar, son.</p></div> 

    <a class="back-to-projects" href="" title="Back">Back</a> 
</div> 


<ul class="projects"> 
    <li><img class="t" src="/_/img/elevator-pitch/thumbs/video/dwight-howard.jpg" alt="Dwight Howard" /></li> 
    <li><img class="t" src="/_/img/elevator-pitch/thumbs/video/brian-deegan.jpg" alt="Brian Deegan" /></li> 
    <li><img class="t" src="/_/img/elevator-pitch/thumbs/video/patrick-willis.jpg" alt="Patrick Willis" /></li> 
    <li><img class="b" src="/_/img/elevator-pitch/thumbs/video/castles.jpg" alt="Castles" /></li> 
    <li><img class="b" src="/_/img/elevator-pitch/thumbs/video/springtime.jpg" alt="Springtime" /></li> 
    <li><img class="b" src="/_/img/elevator-pitch/thumbs/video/powerbar.jpg" alt="Powerbar" /></li> 
</ul> 

Answer 1

我結束了一類.visible添加到可見元素簡化程序，然後刪除它時，我想將其隱藏。所以拍攝我。

Answer 2

除非還有一些HTML或JS丟失，否則您的代碼對於需要執行的操作而言非常複雜。這裏有一個解決方案，它包含少量JS（以及更好的實踐，見下文），並且只有1個額外的HTML元素（無論如何創建更好的邏輯分隔）。

var $videolist = jQuery('ul.projects'); 
    var $videoplayer = jQuery('.video-container'); 
    var videoplayerID = jQuery('#video-player-1_wrapper').attr('id'); 

    jQuery('ul.projects li').click(function() { 
    var filename = jQuery(this).find("img").attr("alt"); 
    var $infoclass = jQuery('.' + filename.replace(/ /g,'')); 

    jwplayer(videoplayerID).setup({ 
     'flashplayer': '/_/jw/player.swf', 
     'id': 'playerID', 
     'width': '258', 
     'height': '145', 
     'file': '/_/videos/' + filename + '.mp4', 
     'autostart': true, 
     'events': { 
      onComplete: function(event) { 
       $videoplayer.fadeOut(function() { 
        $infoclass.fadeOut(); 
        jwplayer(videoplayerID).remove(); 
        $videolist.fadeIn(); 
       }); 
      } 
     } 
    }); 

    $videolist.fadeOut(function() { 
     $videoplayer.fadeIn(); 
     $infoclass.fadeIn(); 
    }); 

    }); 

    jQuery('.back-to-projects').click(function(e) { 
     e.preventDefault(); 
     jQuery('.info div:visible').fadeOut(); 
     $videoplayer.fadeOut(function() { 
      jwplayer(videoplayerID).remove(); 
      $videolist.fadeIn(); 
     }); 
    }); 

<div class="video-container" style="display:none;"> 
    <div id="video-player-1_wrapper" style="float:left;"></div> 
    <div class="info"> 
     <div class="DwightHoward" style="display:none;"><p>Dwight Howard, son.</p></div> 
     <div class="BrianDeegan" style="display:none;"><p>Brian Deegan, son.</p></div> 
     <div class="PatrickWillis" style="display:none;"><p>Patrick Willis, son.</p></div> 
     <div class="Castles" style="display:none;"><p>Castles, son.</p></div> 
     <div class="Springtime" style="display:none;"><p>Springtime, son.</p></div> 
     <div class="Powerbar" style="display:none;"><p>Powerbar, son.</p></div> 
    </div> 

    <a class="back-to-projects" href="" title="Back">Back</a> 
</div> 


<ul class="projects"> 
    <li><img class="t" src="/_/img/elevator-pitch/thumbs/video/dwight-howard.jpg" alt="Dwight Howard" /></li> 
    <li><img class="t" src="/_/img/elevator-pitch/thumbs/video/brian-deegan.jpg" alt="Brian Deegan" /></li> 
    <li><img class="t" src="/_/img/elevator-pitch/thumbs/video/patrick-willis.jpg" alt="Patrick Willis" /></li> 
    <li><img class="b" src="/_/img/elevator-pitch/thumbs/video/castles.jpg" alt="Castles" /></li> 
    <li><img class="b" src="/_/img/elevator-pitch/thumbs/video/springtime.jpg" alt="Springtime" /></li> 
    <li><img class="b" src="/_/img/elevator-pitch/thumbs/video/powerbar.jpg" alt="Powerbar" /></li> 
</ul> 

的幾點：

你都做了很多DOM遍歷的，這是沒有必要的時候你可以有通過ID /類，這是我做的只是上面直接使用選擇。

您還在複製一些變量，而不是在點擊事件之上聲明它們。

你的代碼的另一個大問題是jQuery對象翻倍。

實施例：

var videolist = jQuery(this).closest('ul'); 
var videoplayer = jQuery(videolist).prev(); 

第一行返回一個jQuery對象（videolist）。沒有理由在下一行的jQuery（）中包裝它。你可以安全地做：

var videolist = jQuery(this).closest('ul'); 
var videoplayer = videolist.prev(); 

如果你看我的代碼，我使用$ var來引用一個jQuery對象。這純粹是個人/風格的決定，但它有助於快速判斷變量是否爲jQuery對象。

這裏閱讀有關jQuery對象類型的詳細信息：http://api.jquery.com/Types/#jQuery