jQuery를 사용하여 보이는 항목 찾기

Question

나는 비디오 플레이어와 그 비디오의 정보를 보여주고 뒤로 버튼을 클릭하면이 코드를 숨 깁니다. 그러나 다른 비디오를 볼 때 뒤로 버튼은 두 번째로 볼 수있는 div를 선택하지 않습니다. :visible 선택기가 어떤 div가 표시되는지 결정할 수 있도록 .live()에 연결해야합니까? 그렇지 않다면 내 눈에 띄는 사업부를 찾을 수없는 이유는 무엇입니까?

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

나는 내가 그것을 숨기고 싶어 할 때를 제거 후 눈에 보이는 요소에 클래스 .visible를 추가하여 프로세스를 단순화하고, 결국

<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

html로. 그래서 날 쏴.

Answer 2

HTML 또는 JS가 더 이상 없다면 코드가 수행해야 할 작업에 매우 복잡합니다. 다음은 JS가 적고 (더 나은 방법, 아래 참조), 단 하나의 추가 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> 

몇 가지 포인트 :

당신은 당신이 내가 위에서 무슨 짓 ID /별로 단지를 직접 사용 선택기를 가질 수 필요한 경우 아니었다 DOM 탐색을 많이하고 있었다.

또한 클릭 이벤트 위에 선언하는 대신 일부 변수를 복제하고있었습니다.

코드의 다른 큰 문제는 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