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() 方法，然后实现将所有同位素元素存储在 $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 回答