Isotope js 필터 관련 문제

Question

Isotope js에서 필터를 적용하는 데 문제가 있습니다. 필터를 적용 할 때 내 모든 콘텐츠가 사라지는 것 같습니다. (참고 :이 질문은 Jquery가 아닌 일반 바닐라 JS 환경에서 Isotope 사용에 관한 것입니다.) 내가 ShowCat를 호출하면

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

(2), 모든 것이 잘 작동하는 것 같다 :

나는 그래서 카테고리별로 필터링 할 수있는 간단한 기능이 된 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> 

의 시리즈가있다. 'catnum2'클래스가있는 두 개의 DIV 만 표시됩니다. 다른 것들은 사라진다. 지금까지 너무 좋아 ...

그러나 'catnum1'DIV를 표시하기 위해 다시 필터링하는 대신 ShowCat (예 : ShowCat (1);)을 다시 호출하면 모든 DIV가 사라지고 빈 화면.

필자의 필터 유형으로 "*"를 사용하여 사전 필터링을 시도했습니다. 나는 또한 새로운 필터 요청으로 함수를 다시 실행하기 전에 sortBy "original-order"를 시도했다. 그러나 아무것도 DIV의 원래보기로 복원하는 것 같습니다. 이 함수는 한 번만 실행되는 것으로 보이며 모든 연속 호출은 처음부터 새 필터 요청을 수행하는 대신 첫 번째 필터 요청에 새 필터를 추가하는 것처럼 보입니다.

새 필터를 실행하기 전에해야 할 일이 있습니까? 모든 것이 사라지는 이유에 대한 단서?

Answer 1

문제가 해결되었습니다.

다른 사람이 Jscery없이 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'));