Question

我在Isotope js中应用过滤器时遇到问题。应用过滤器时，我的所有内容似乎都消失了。（注意：这个问题是关于在简单的vanilla JS环境中使用Isotope而不是Jquery）。

我有一系列DIV

<DIV id="thecontainer">
 <DIV class="displaybox catnum1"> div content </DIV>
 <DIV class="displaybox catnum1"> div content </DIV>
 <DIV class="displaybox catnum2"> div content </DIV>
 <DIV class="displaybox catnum2"> div content </DIV>
 <DIV class="displaybox catnum3"> div content </DIV>
</DIV>

所以我有一个简单的功能来按类别过滤：

function ShowCat(catnumber) {
    var container = document.getElementById('thecontainer');
            var iso = new Isotope(container);
    iso.arrange(
        filter: '.catnum'+catnumber,
        });
 }

如果我调用ShowCat（2），一切似乎都运行正常。只有具有'catnum2'类的两个DIV可见。其他人消失了。到目前为止一切都很好......

但是，如果我再次调用ShowCat（例如：ShowCat（1）;）而不是重新过滤以显示'catnum1'DIV'，则所有DIV都会消失，并且我有一个空白屏幕。

我尝试使用“*”作为我的过滤器类型进行预过滤。在使用新的过滤器请求再次执行该函数之前，我还尝试过sortBy“original-order”。但似乎没有什么能够将DIV恢复到他们原来的观点。该函数似乎只运行一次，并且所有后续调用似乎都在第一个过滤器请求中添加新过滤器，而不是从头开始执行新的过滤器请求。

在运行新过滤器之前，我需要做些什么吗？关于为什么一切都在消失的任何线索？

Answer 1

问题解决了。

如果其他人在没有Jquery的情况下使用Isotope有类似的问题，我希望以下函数证明是有用的。没有框架（除了同位素）。

（这将隐藏和显示问题中定义的DIV）。

使用以下函数调用该函数：cats.showCat（1）;

使用null参数重置为原始（非过滤视图）：cats.showCat（）;

var Cats = (function(){

function Cats(element) {
    this.element = element;

    this.iso = null;

    this.currentCat = null;


    this.init(); 
};

Cats.prototype.init = function() {
    this.iso = new Isotope(this.element);
};

Cats.prototype.showCat = function(catNumber) {
    if(this.currentCat == catNumber){
        return;
    };

    this.currentCat = catNumber;

    if(catNumber == null){
        this.iso.arrange({
            filter: '*'
        });
    }else{
        this.iso.arrange({
            filter: '.catnum' + catNumber
        });
    };

};


 return Cats;
 })();


var cats = new Cats(document.getElementById('thecontainer'));

Isotope js过滤器的问题

1 个答案: