ブートストラップ+ mixitupフィルタロード時

Question

私たちはMixItUp v3.1.11フィルタリングによってブートストラップにポートフォリオを表示しようとしており、ページがロードされたときに特定のカテゴリ（すべてのプロジェクトではない）をロードしようとしています。

Patrick Kunkaは、どのように実行できるかの例を提供しましたhere。

同じ問題がreccomended soultionが動作していないということですhere

私たちの問題頼まれました。私の推測では、それは+ mixitup問題をブートストラップによるセレクタの変化に関連していることである。

制御：「[データmixitup制御]」

ここでは、コードの一部でありますページの末尾に：

フィルタを希望の.residentialに変更すると機能しません。

は私もこれを追加しようとしました：

$(function(){ 
    $('#selector').mixItUp({ 
    load: { 
     filter: '.residential' 
    } 
    }); 
}); 

ありません運を。問題が起きる可能性のある人はいますか？

Answer 1

私はこの例を試しましたが、バージョン2.1.6で動作します。ここで

は私のサンプルコードです：

$(function(){ 
    $('#selector').mixItUp({ 
    selectors: { 
     target: '.item' 
    }, 
    layout: { 
     display: 'inline-block' 
    }, 
    load: { 
     filter: '.residential' 
    } 
    }); 
}); 

これはのみ表示.residentialに関連する項目でDOMをロードします。

これが役に立ちます。

Answer 2

MixItUpバージョン3.1.11およびBootstrap 3と組み合わせてこの例を試してください。

他のデータの属性との競合を避けるために、データmixitup・コントロールを追加します。

<button type="button" class="control" data-mixitup-control data-filter=".residential">Residential</button> 

初期化MixItUp：

var containerEl = document.querySelector('.container'); 

var mixer = mixitup(containerEl, { 
    selectors: { 
     control: '[data-mixitup-control]' 
    }, 
    load: { 
     filter: '.residential' 
    } 
}); 

あなたは別途'fade scale'アニメーション効果を設定する必要はありません - それはですデフォルト設定。 https://www.kunkalabs.com/mixitup/docs/configuration-object/

Answer 3

MixItUp v3.1.9とBootstrap 4と組み合わせてこの例を試してください。

他のデータの属性との競合を避けるためにdata-mixitup-controlを追加します。

<button type="button" class="control" data-mixitup-control data-`enter code here`filter=".product">PRODUCTS</button> 

初期化MixItUp：

var container = document.querySelector('.portfolio'); 

var mixer = mixitup(container, { 
    selectors: { 
     control: '[data-mixitup-control]' 
    } 
});