jQueryの機能 - 理解不能な行動

Question

ここに私のスクリプトを参照してください：私が気づいた理解不能の行動はLIVE EXAMPLE

があります。

ロード時'All'は3オプション見える持っている - しかし、あなたは'all'に戻っ'logo'に切り替えたときに、私たちは4

なぜがありますか？最初のタブにも4つの項目があるはずです。 - 私は私たちのvar filterClass = "all";がONLY li'all'クラスとを表示することを意味しているすべてであることを定義している

• onloadイベントを：スクリプトの動作どのよう

  。あなたが何かのフロントトップメニューを選択すると

• - クラスだと、私たちは基本的にチェックCreateTabs機能を実行するすべての変更で同じクラス（「李」複数のクラスを持っている）
• でli見つけ取っているどのように多くの「李」私たちはタブでそれらを作成します（すべてのタブで4）。

ロード時ザ・スクリプト - controlesクラス：

$('#portfolio-items li').CreateTabs(); 
var filterClass = "all"; 

$('.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); 

}); 

CreateTabsスクリプト：

(function($) { 

$.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); 

のonLoadスクリプトcontrolesのTABS

$('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(); 
    } 
    else if ($(this).hasClass('href-2')) { 

     PI.slice(4, 8).show(); 
    } 
    else if ($(this).hasClass('href-3')) { 
     PI.slice(8, 12).show(); 
    } 
    else if ($(this).hasClass('href-4')) { 
     PI.slice(12, 16).show(); 
    } 
    else if ($(this).hasClass('href-5')) { 
     PI.slice(16, 20).show(); 
    } 
    else if ($(this).hasClass('href-6')) { 
     PI.slice(20, 24).show(); 
    } 
    else if ($(this).hasClass('href-7')) { 
     PI.slice(24, 28).show(); 
    } 
    else if ($(this).hasClass('href-8')) { 
     PI.slice(28, 32).show(); 
    } 
    else if ($(this).hasClass('href-9')) { 
     PI.slice(32, 36).show(); 
    } 
    event.preventDefault(); 
}).filter(':first').click(); 

Answer 1

は the jQuery .slice() documentationを見る：

指数は再びゼロベースです。範囲は までになりますが、指定されたインデックスのは含まれません。

したがって、たとえば：

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

should be：

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

---

編集

デニスは絶対に正しいです。私は数えられません。

$('#portfolio-items li' + (filterClass !== undefined) ? '.' + filterClass : ''); 
// vs 
$('#portfolio-items li' + ((filterClass !== undefined) ? '.' + filterClass : '')); 

---

This solves a number of bugs in a number of places、選択している場合は、「ページ」あなたは、レンダリング方法に互いに素があるために存在し、そのほとんど：あなたが原因括弧の使用状況で十分に明示されていないため、間違ったことにスライスしましたカテゴリ、およびページ番号を選択するときに使用します。

• ページ番号（およびあなたの.filter(':first').click()によるページロード、上）をクリックすると、このバグが現れます。

• しかし、カテゴリをクリックすると、異なるロジックは、この問題を示さない— $('#portfolio-items li:lt(4)').show() —が呼び出されます。

Iはインターフェースの「状態」はに場所を追跡し、必要に応じて再描画される強力なハイレベルの設計を検討したいです。

Answer 2

あなたは括弧の問題、これはあなたのために働く必要があります：あなたは以前にも、あなたのタブを選択し、ここに示すことができ、あなたの配列のインデックスを、めちゃくちゃにされたセレクタ.allを取得した

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

を：

良い測定のための

var filterClass = "all"; 
var selector = '#portfolio-items li' + (filterClass !== undefined) ? '.' + filterClass : '' 
console.log(selector); //prints ".all", which is clearly not the selector you are going for 

jsfiddle：http://jsfiddle.net/DmFmM/60/