Question

好的，我正在为WordPress构建一个投资组合插件。用户可以在其内容中插入一个短代码并显示一个组合。

每个产品组合将使用jQuery Isotope，每个产品都有自定义设置。

我希望能够在一个页面上显示多个投资组合，并初始化各自的Isotope jQuery参数。

所以我开始将设置中的数据属性添加到每个组合容器中，每个容器上都有一个公共类。

然后我用以下（简化）设置了一个JS文件：

var $container = jQuery('.portfolio-listing');
var $eachContainer = jQuery('#' + $container.data('portfolio-id'));

$eachContainer.imagesLoaded( function(){
    $eachContainer.isotope({
        // options
        itemSelector : '.portfolio-item.item-' + $eachContainer.data('portfolio-id'),
        layoutMode : $eachContainer.data('layout'),
    });
});

这是我的HTML（简化）：

<div id="test" class="portfolio-listing" data-layout="masonry" data-portfolio-id="test">
    <div class="portfolio-item item-test">
         ... inner portfolio stuff
    </div>
</div>

<div id="another" class="portfolio-listing" data-layout="fitRows" data-portfolio-id="another">
    <div class="portfolio-item item-another">
         ... inner portfolio stuff
    </div>
</div>

<div id="onemore" class="portfolio-listing" data-layout="masonry" data-portfolio-id="onemore">
    <div class="portfolio-item item-onemore">
         ... inner portfolio stuff
    </div>
</div>

这导致页面上的第一个投资组合获得正确的参数，然后其余的只是模仿第一个投资组合的参数。

任何人对我都有任何想法？

Answer 1

你的JS

var $container = jQuery('.portfolio-listing');
var $eachContainer = jQuery('#' + $container.data('portfolio-id'));

$eachContainer.imagesLoaded( function(){
    $eachContainer.isotope({
        // options
        itemSelector : '.portfolio-item.item-' + $eachContainer.data('portfolio-id'),
        layoutMode : $eachContainer.data('layout'),
    });
});

如果您希望在所有div上执行操作，则只需将第一个投资组合div选择为$eachContainer，您必须迭代对象集$container

将您的JS更改为

var $container = jQuery('.portfolio-listing');
$container.each(function () {
    var $eachContainer = jQuery('#' + $(this).data('portfolio-id'));

    $eachContainer.imagesLoaded(function () {
        $eachContainer.isotope({
            // options
            itemSelector: '.portfolio-item.item-' + $eachContainer.data('portfolio-id'),
            layoutMode: $eachContainer.data('layout'),
        });
    });
});

这种方式$eachContainer将是.portfolio-listing个div而不仅仅是第一个

HTML数据属性和jQuery

1 个答案: