jQuery函数-难以理解的行为

Question

请看我的脚本：实例化

我注意到了一种莫名其妙的行为。

'All' 有3个选项可见--但是当您切换到 'logo' 并返回到 'all' 时，我们有4.。

为什么？第一个选项卡中也应该有4个项。。

脚本是如何工作的：

• onload -我定义了我们的var filterClass = "all";，这意味着只显示带有'all'类的li。
• 当您在顶部菜单前面选择某项时-它接受它的类，并找到具有相同类的li ('li‘有多个类)
• 在每次更改时，我们都运行CreateTabs函数，它基本上检查我们有多少个'li‘，并在制表符中(每个选项卡上有4个)。

控制类的Onload classes:

$('#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脚本，它控制制表符

$('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

您有括号问题，这应该适用于您：

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

好的衡量标准：http://jsfiddle.net/DmFmM/60/