3

以下のサンドボックス コード ( jQuery Isotopeレイアウトおよびソート プラグインを使用)。何が起こるか:

  1. .item をクリックすると、そのコンテンツがさらに表示されるように成長します (.maximise)。
  2. 同じ.itemを再度クリックすると、縮小してそのコンテンツのほとんどが非表示になります (.minimise)。

  3. 他の.item をクリックすると、1. が実行され、他のすべてのアイテムが 2. が実行されます。

    $items = $('.item'); // solution

$('.item').click(function () {

var $this = $(this);
var $previousSelected = $('.selected');

if ($(this).hasClass('selected')) {

    $items.not(this).find('.slideshow').removeClass('transparent'); // solution

    $(this).removeClass('selected');
    $(this).children('.maximise').hide();
    $(this).children('.minimise').show();

} else {

    $items.not(this).find('.slideshow').addClass('transparent'); // solution

    $previousSelected.removeClass('selected');
    $previousSelected.children('.minimise').show();
    $previousSelected.children('.maximise').hide();

    $(this).addClass('selected');
    $(this).children('.minimise').hide();
    $(this).children('.maximise').show();
}

// $container.isotope('shuffle'); uncomment to always randomise layout
// $container.isotope('reLayout'); uncomment if no sorting logic is used
$container
.isotope('updateSortData', $this)
.isotope('updateSortData', $previousSelected)
.isotope();
});

よろしくお願いします！

編集.find() が見つかりました。次に .not() メソッドを実行し、すべての Isotope 要素を $items = $('.item'); に格納するだけであることに気付きました。

4

2 に答える 2

2

ヒント: セレクター クエリが既にオブジェクト (変数) に格納されている場合は、セレクター内で再度使用する必要はありません。オブジェクトをそのまま使用できます。

var $previousSelected = $('.selected');

...
//$($previousSelected).removeClass('selected');
$previousSelected.removeClass('selected');
于 2012-07-13T16:47:06.327 に答える
1

jQueryのaddClassメソッドでこれを行うことができます。jQuery は、要素を追加する前に、要素に .transparent クラスが既に設定されているかどうかを確認します。

$($previousSelected).children('.minimise').addClass('transparent').show();

非表示にするときに透明なクラスを削除することもできます。その場合、次の後にクラスを削除し.hide()ます。

$($previousSelected).children('.maximise').hide().removeClass('transparent');
于 2012-07-13T16:42:12.550 に答える