1

このフィルタリングデモをほぼ完全にコピーしたにもかかわらず、プラグインを取得し.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>


Javascript

// 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>
4

1 に答える 1

2

実際にクラスを削除するためのコードはありません。そのプラグインについては何も知りませんが、次のようなことができます。

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

クラスを必要な要素/アタッチしたい要素に追加し直します。

于 2012-12-19T17:22:21.843 に答える