-1

好的，所以我正在为 WordPress 构建一个投资组合插件。用户将能够在其内容中插入简码并显示投资组合。

每个 Portfolio 都将使用 jQuery Isotope，每个 Portfolio 都有自定义设置。

我希望能够在一页上显示多个投资组合，并初始化它们各自的同位素 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>

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

有人对我有什么想法吗？

4

1 回答 1

2

你的 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'),
    });
});

$eachContainer如果您希望对必须遍历对象集的所有 div 执行操作，则只会选择第一个投资组合 div$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-listingdiv 而不仅仅是第一个

于 2013-09-14T02:47:20.387 回答