동위 원소 결과가 없습니다 Combination Filters에 대한 메시지

Question

마침내 도움을 청했습니다. 나는 조금의 행운과 함께 1 주일 동안 나의 동위 원소 이미지 갤러리에 나타나기를 원하는 결과 메시지를 얻지 않으려 고 노력했다. 한 지점에서 예제를 사용했지만 애니메이션이 완료 될 때까지 메시지가 숨겨지지 않았으므로 전혀 좋지 않았습니다.

분명히 해결책이 있습니다.

누군가 나를 도울 수 있다면 크게 감사하겠습니다. 나는 테스트 사이트를 가지고 여기 잠깐 링크 할 것이다.

여기 내 동위 원소 구성 파일의 전반부가 있습니다. 나는 '.message-div'를 CSS의 'display : none;'을 적용하여 #isotopegallery div의 하단에 배치했다.

jQuery(window).load(function() { 

    var $container = $('#isotopegallery').imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector: '.photo', 
      masonry: { 
       columnWidth: 161, 
       gutter: 10 
      }, 
      transitionDuration: '0.6s' 
     }); 

     // Filters 
     // 
     var filters = {}; 
     $('#isotopefilters').on('click', '.menu-item', function() { 

      var $this = $(this); 
      // get group key 
      var $buttonGroup = $this.parents('.filter-title'); 
      var filterGroup = $buttonGroup.attr('data-filter-group'); 
      // set filter for group 
      filters[filterGroup] = $this.attr('data-filter'); 
      // combine filters 
      var filterValue = ''; 
      for (var prop in filters) { 
       filterValue += filters[prop]; 
      } 

      $container.isotope({filter: filterValue}); 

      // Possibility 
      $container.isotope('on', 'layoutComplete', 
       function(iso, laidOutItems) { 
       if (laidOutItems < 1) { 
       $('.message-div').fadeIn('slow'); 
       } else { 
       $('.message-div').fadeOut('fast'); 
       } 
      }) 
     }); 
    }); 
}); 

Answer 1

"결과 없음"메시지를 쉽게 얻을 수있는 해결 방법이 있습니다. ".photo"를 itemSelector 클래스로 간주합니다. 동위 원소는 필터와 일치하지 않는 경우 div 컨테이너에 ".isotope-hidden"을 첨부하는 것이므로이 div 수는 "결과가없는 경우"의 모든 동위 원소 항목의 합계와 같습니다. 쉬운 :

if($(".isotope-hidden").length == $(".photo").length) { 
    $("#mynoresults").show(); 
    }