jQuery函數 - 難以理解的行爲

Question

請參閱我的腳本在這裏：LIVE EXAMPLE

有我注意到一個難以理解的行爲。

的Onload 'All'有3個選項明顯 - 但是當你切換到'logo'和回'all'我們有4

爲什麼？第一個標籤中應該有4個項目。

如何進行腳本工作：

• onload事件 - 我已經定義了我們的var filterClass = "all";是所有這意味着，只顯示li與'all'類。
• 當您選擇一些正面的頂部菜單 - 它正在它的類，並且使用相同的類（「禮」具有多類）
• 上的每一個變化發現li我們運行CreateTabs功能基本上檢查有多少個「禮」我們有，並在製表符（每個選項卡上4）。

的Onload素文字 - 這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()），這個bug會表現。

• 但是，點擊某個類別時，一個不同邏輯調用— $('#portfolio-items li:lt(4)').show() —它不會出現此問題。

我會考慮一個更強有力的高層次的設計，在界面的「狀態」 一個地方跟蹤和重新呈現在必要時。

Answer 2

你有括號的問題，這應該爲你工作：

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

您在前面已經獲得選擇.all這是選擇，即使你的標籤，搞亂你的數組索引，可以在這裏顯示：

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/