Question

我正在尝试使用此布局：masonry column shift

当我点击主要项目时，这对我有用：

$container.find('.wrapper').click(function(){
        $(this).css({ height: "+=100" });
        // note that element is passed in, not jQuery object
        $container.isotope( 'shiftColumnOfItem', this );
});

这就是我想要的（点击孩子时触发尺寸更改）：

$container.find('.wrapper li').click(function(){
        var closestwrapper = $(this).closest('.wrapper');
        closestwrapper.css({ height: "+=100" });
        // note that element is passed in, not jQuery object
        $container.isotope( 'shiftColumnOfItem', this );
});

尺寸发生变化，但不会改变色谱柱。我还尝试使用closestwrapper代替this。

在演示页面上有一条我不明白的评论：

// note that element is passed in, not jQuery object

Answer 1

“在演示页面上有一条我不明白的评论：”

// note that element is passed in, not jQuery object

DOM元素是表示页面上元素的对象。 jQuery对象是由jQuery库构造的对象，它通常包含一个或多个DOM元素。

在您的第一个isotope()电话中，您正在传递this，在这种情况下，它是一个DOM元素。

但在第二个版本中，如果您尝试传递closestwrapper，则传递包含DOM元素的jQuery对象。所以你需要的是从jQuery对象中提取DOM元素。

jQuery将DOM Elements存储在从零开始的数字索引中，因此您可以使用典型的Object成员运算符来获取DOM元素。

// -----------------------------------------------------v
$container.isotope( 'shiftColumnOfItem', closestwrapper[0] );

当孩子触发时，同位素columnhift不起作用

1 个答案: