jQueryの機能 - 予期しない動作

Question

Please see my demo.

それは何：

• 一度選択したタブを、そのクラスを取得し、このクラス

  $('.portfolio-filter li a').click(function() { 
  
  
      $('.portfolio-filter > .selected').prop('class',''); 
      $(this).parent('li').addClass('selected'); 
  
      var FilterClass = $(this).attr('class'); 
  
      $('#portfolio-items li').hide(); 
      $('#portfolio-items li.' + FilterClass).show(); 
      $('#portfolio-items').CreateTabs(); 
  
  }); 
  

  でのみul.portfolio > li の要素を示している上に

• 次に、CreateTabs関数を実行します。これは、b ottom

• 問題が<li class="all website"></li>をある最後の要素はそれに'logo'クラスを持っていないということですが、タブのロゴを選択した場合、それはなぜdisplayed./

を得るのだろうか？どんな提案も高く評価されました！

Answer 1

問題は、CreateTabsおよびPaginationの機能にあります。ここで

はCreateTabsのためのソリューションです：

$.fn.CreateTabs = function(filterClass){ 

     var CoundNumberOfDivs = $('#portfolio-items li:visible').length; 
     $('.pagination li a').hide(); 
     if(CoundNumberOfDivs <= 4) { 
      return false; 
     } 
     else { 
      var num = Math.ceil(CoundNumberOfDivs/4); 
      $('.pagination li a:lt(' + num + ')').show(); 
      $('#portfolio-items li').hide(); 
      if (filterClass === undefined) { 
       $('#portfolio-items li:lt(4)').show(); 
      } else { 
       $('#portfolio-items li.' + filterClass + ':lt(4)').show(); 
      } 
     } 

    }; 
})(jQuery); 

あなたが最初の4つの要素の一つにlogoクラスを削除した場合、あなたはフィルタが動作することを確認できます。 ページネーションはまだ問題を解決します...だからここに解決策があります。率直に言って、これはちょうど悪いです -

var filterClass; 

$('.portfolio-filter li a').click(function() { 


    $('.portfolio-filter > .selected').prop('class',''); 
    $(this).parent('li').addClass('selected'); 

    filterClass = $(this).attr('class'); 

    $('#portfolio-items li').hide(); 
    $('#portfolio-items li.' + filterClass).show(); 
    $('#portfolio-items').CreateTabs(filterClass); 

}); 

$('ul.pagination li a').click(function(event) { 
     $('ul.pagination li .active').removeClass('active'); 
     $(this).addClass('active'); 

    var PI = $('#portfolio-items li' + (filterClass !== undefined) ? '.' + filterClass : ''); 
     $('#portfolio-items li').hide(); 
    ..... 

 if ($(this).hasClass('href-1')) { 
      PI.slice(0, 4).show(); 
     } 
     .... etc 

との一部を書き換えする必要があります。

Answer 2

私は完全に理解できませんでしたが、最後のLI要素が3ページ目に切り替わった場合にのみ表示されるため、問題はページ分割機能にあると思いますか？この時 ルック： ：クリックすべて ：クリック第三ページ ：クリック「ロゴ」 -Observe -result：数3が選択し続け、および改ページの順序が変更され、あなたは2ページをクリックすると、結果が高くなっていますページ3のものよりも大きい。