2012-12-19 5 views
1

이 필터링을 거의 완벽하게 복사 했음에도 불구하고 현재 요소에서 .selected 클래스를 제거하고 클릭 한 플러그인에 플러그인을 추가 할 수 없습니다. .탐색 항목 클릭시 변경하려는 .selected 클래스를 가져올 수 없습니다.

현재 결과는 항목이 필터링되지만 .selected 클래스는 <li><a href="#videos" data-filter="*" class="selected">All</a></li>에 할당 된 채로 남아 있습니다.


HTML

<ul class="category_navigation option-set" data-option-key="filter"> 
    <li><a href="#videos" data-filter="*" class="selected">All</a></li> 
    <li><a href="#videos" data-filter=".feature">Feature</a></li> 
    <li><a href="#videos" data-filter=".commercial">Commercial</a></li> 
    <li><a href="#videos" data-filter=".music_video">Music Video</a></li> 
    <li><a href="#videos" data-filter=".trailer-promo">Trailer/Promo</a></li> 
    <li><a href="#videos" data-filter=".digital">Digital</a></li> 
</ul> 


자바 스크립트

// cache container 
var $container = $('.videos'); 
// initialize isotope 
$container.isotope({ 
}); 

// filter items when filter link is clicked 
$('[href="#videos"]').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 
    return false; 
}); 


항목 HTML 샘플

<li class="trailer-promo"> 
    <a href='http://player.vimeo.com/video/55078437?autoplay=1' 
     class='lightview' 
     data-lightview-group='trailer/promo' 
     data-lightview-type='iframe' 
     data-lightview-title="KUNG FU PANDA 2" 
     data-lightview-caption="20 Intl.<br>Dir: Dreamworks/Aspect Ratio" 
     data-lightview-options="width: 796, height: 447, viewport: 'scale'"> 
     <img src="img/video_thumbs/TRAILER_KUNG-FU-PANDA_2.jpg" alt=""> 
     <p>KUNG FU PANDA 2</p> 
    </a> 
</li> 

<li class="feature"> 
    <a href='http://player.vimeo.com/video/16129275?autoplay=1' 
     class='lightview' 
     data-lightview-group='feature' 
     data-lightview-type='iframe' 
     data-lightview-title="RAY CHARLES AMERICA" 
     data-lightview-caption="Client: Tremolo Productions<br>Dir: Alexis Spraic" 
     data-lightview-options="width: 796, height: 447, viewport: 'scale'"> 
     <img src="img/video_thumbs/FEATURE_RAY-CHARLES-AMERICA.jpg" alt=""> 
     <p>RAY CHARLES AMERICA</p> 
    </a> 
</li> 

<li class="commercial"> 
    <a href='http://player.vimeo.com/video/28387434?autoplay=1' 
     class='lightview' 
     data-lightview-group='commercial' 
     data-lightview-type='iframe' 
     data-lightview-title="VIEWDLE" 
     data-lightview-caption="Third Eye<br>Dir: Blake & Nic" 
     data-lightview-options="width: 796, height: 447, viewport: 'scale'"> 
     <img src="img/video_thumbs/COMMERCIAL_THIRD-EYE.jpg" alt=""> 
     <p>VIEWDLE</p> 
    </a> 
</li> 

답변

2

클래스를 실제로 제거하는 코드가 없습니다. 그 플러그인에 대해 아무것도 몰라,하지만 당신은 이런 식으로 뭔가를 할 수 :

$(".selected").removeClass("selected"); 

당신이 그것을가 부착 원하는/필요한 어떤 요소에 다시 클래스를 추가 할 수 있습니다. 내가 생산에 투입 관심있는 코드에 대한

+0

했다 : \t $은 ('category_navigation의 리튬가.')을 클릭 (함수() { \t \t $() removeClass() "을 선택";. "를 선택.". \t \t $ (this) .addClass ('selected') \t}); – nipponese