Question

下面的沙箱代码（使用jQuery Isotope布局和排序插件）。会发生什么：

如果单击.item，它将增长以显示其更多内容（.maximise）
如果再次点击相同的 .item，它将缩小以隐藏其大部分内容（.minimise）

如果单击任何其他 .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'）;

Answer 1

提示：如果您已将选择器查询存储在对象（变量）中，则无需在选择器中再次使用它，您只需使用该对象。

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

...
//$($previousSelected).removeClass('selected');
$previousSelected.removeClass('selected');

Answer 2

您可以使用jQuery的addClass方法执行此操作。 jQuery将检查是否已在元素上添加了.transparent类，然后才将其添加。

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

您可能还想在隐藏透明类时删除透明类，在这种情况下，我会在.hide()后删除该类：

$($previousSelected).children('.maximise').hide().removeClass('transparent');

jQuery .show（）和.toggleClass（“foo”）同时在一个对象上？

2 个答案: