Question

请在此处查看我的脚本：LIVE EXAMPLE

我注意到了一种无法理解的行为。

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

为什么呢？第一个标签中也应该有4个项目。

脚本如何运作：

onload - 我已经定义我们的var filterClass = "all";只是表示li只有'all'类。
当您在顶部菜单中选择某些内容时 - 它正在使用它的类并找到具有相同类的li（'li'具有多个类）
我们运行的每个更改CreateTabs功能，基本上检查我们有多少'li'并在标签中制作它们（每个标签上有4个）。

Onload Scipt - 控制类：

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

控制TABS的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

~~查看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() - 这不会出现此问题。

我会考虑一种更强大的高级设计，在一个位置跟踪界面的“状态”，并在必要时重新渲染。

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 for good measure：http://jsfiddle.net/DmFmM/60/

jQuery函数 - 无法理解的行为

2 个答案: