7

4 つのオプションを含む選択ボックスがあります。それぞれを選択すると、現在の.itemdiv がすべて削除され、新しいものが読み込ま.itemsれ、同位体を使用して再調整されます。

$('.menu-select').change(function(){
    var selected=$('.menu-select-option:selected').html().toLowerCase();
        if(selected=='all')
            {
                loadContent('mixed_home_all.html');
            }
        if(selected=='recommended')
            {
                loadContent('mixed_home_reco.html');
            }
        if(selected=='popular')
            {
                loadContent('mixed_home_pop.html');
            }
});

loadContent 関数は次のようになります。

    function loadContent(filename){
        var $item=$('.item');
        $container.isotope('remove', $item);
        $container.load(filename, function(){
            $container.imagesLoaded(function(){
                $container.isotope('reLayout');
            });
        });
    }

何らかの理由で、機能しreLayoutていません。クラスisotope-itemは個々のアイテムにも追加されていません。コンソール ログにエラーはありません。

4

2 に答える 2

14

以前の同位体を破棄し、選択ボックスのすべての値に対して新しい同位体をトリガーすることで、これを解決しました。私のloadContent関数は今このように見えます：

    function loadContent(filename){
        var $item=$('.item');
        $container.isotope('destroy'); //destroying isotope
        $container.load(filename, function(){
            $container.imagesLoaded(function(){
                $container.isotope({ //triggering isotope
                    itemSelector: '.item'
                });
            });
        });
    }
于 2013-02-10T12:15:16.957 に答える
0

Axios で Vue JS を使用してアイソトープにデータをロードしている場合、ここでの問題は、DOM の構築中にデータが利用できないことです。そのため、アイソトープはデータなしでレンダリングされます。少し試した後、私はそれを回避する方法を見つけました。

  1. jquery-isotope が jquery の後にロードされていることを確認してください。そうしないと、「$ is not defined」がスローされます。
  2. $('element').isotope({...}) が呼び出されるのは、ajax 呼び出しが成功した後であることを確認してください。

以下のスクリーンショットで、ajax 呼び出しが成功した後に読み込まれる custom.js を確認すると、$('element').isotope({...}) を呼び出す initIsotope メソッドが含まれています。今回のみ、アイソトープのレンダリング中にデータが利用できるので、正常に動作します!

とにかく、この答えがあなたに役立つことを願っています。

initProducts()

initIsotope()

于 2021-03-05T08:13:00.310 に答える