javascript - JQuery .css() 函数不会更改所有属性

Question

我正在创建一个带有滑动面板的 UI，这个 UI 非常符合这个网站的风格:http://smithandhawken.catalogs.target.com/#/intro-cover

我有两种方法来更改页面，按列和按行。用户可以使用键盘以及一些视觉元素来导航页面。运动由这样的函数处理:

function moveDown()
{
unbindAll();
currentPage = 1;

$('div.section').each(function(index, element) {
    if(index+1 == currentSec) {
        console.log($(this));
        $(this).css({ 'margin-top': 0, 'z-index': (storyCount-1)*100 });
        if($(this).next().size()) {
            populate(currentSec+1, currentPage);
            $(this).next().children('div.page').css('left', $(window).width());
            $(this).next().children('div.page').eq(0).css('left', 0);
            console.log(storyCount);
            $(this).next().css({ 'margin-top': $(window).height(), 'z-index': storyCount*100 }).stop().animate({marginTop:0}, 500, function() { 
                currentSec++;
                bindAll();
            });
        }
        else {
            populate(1, currentPage);
            $(this).parent().children().first().children('div.page').css('left', $(window).width());
            $(this).parent().children().first().children('div.page').eq(0).css('left', 0);
            $(this).parent().children().first().css({ 'margin-top': $(window).height(), 'z-index': storyCount*100 }).stop().animate({marginTop:0}, 500, function() {
                currentSec = 1;
                bindAll();
            });
        }
    }
    else if(index != currentSec) {
        $('#section'+(index+1)).css({ 'margin-top': 0, 'z-index': 100 });
    }
    });
}

上面那行在 100% 的情况下以不同的方式工作是 - $(this).css({ 'margin-top': 0, 'z-index': (storyCount-1)*100 });

当用户使用键盘和左/右视觉元素时，一切正常。当他们使用在每一行之间转换的视觉元素时(仅限向上/向下方法)，该函数会触发，但不会应用所有 CSS 属性。这是我正在谈论的视觉元素的函数:

function mdlButton(btnHit)
{
btnLabel = btnHit.attr('id').substr(3);
console.log('enter first swtich '+currentSec);
switch(currentSec)
{
    case 1:
        console.log('enter second switch '+btnLabel);
        if (btnLabel == 1) {
            console.log('dont do anything');
        }
        else if (btnLabel == 2) {
            console.log('move down one');
            moveDown();
        }
        else if (btnLabel == 3) {
            console.log('move down two');
            moveDown();
            moveDown();
        }
        break;
    case 2:
        console.log('enter second switch');
        if (btnLabel == 1) {
            console.log('move up');
            moveUp();
        }
        else if (btnLabel == 2) {
            console.log('dont do anything');
        }
        else if (btnLabel == 3) {
            console.log('move down one');
            moveDown();
        }
        break;
    case 3:
        console.log('enter second switch');
        if (btnLabel == 1) {
            console.log('move up two');
            moveUp();
            moveUp();
        }
        else if (btnLabel == 2) {
            console.log('move up');
            moveUp();
        }
        else if (btnLabel == 3) {
            console.log('dont do anything');
        }
        break;
}

if(!btnHit.hasClass('mdlSelected')) {
    $('div.mdlSec').removeClass('mdlSelected');
    $('div.mdlSec').find('#selected').remove();
    btnHit.addClass('mdlSelected');
    btnHit.find('div.divider').after('<div id="selected"></div>');
    reSize();
}
}

我无法弄清楚为什么从上述函数调用时 z-index 不会改变，而不仅仅是键盘，或者当左/右调用 moveDown()/moveUp() 方法时。以防万一，这是左/右的样子:

function moveLeft()
{
unbindAll();
$('#section'+currentSec+' div.page').each(function(index, element) {
    if(index+1 == currentPage) {
        if($(element).prev().size()) {
            populate(currentSec, currentPage-1);
            $(this).animate({'left': $(window).width()}, 500, function() {
                currentPage--;
                bindAll();
            });
        }
        else {
            moveUp();
        }
    }
    });
}

任何帮助将不胜感激!谢谢

Answer 1

z-index 被 reSize() 函数重置回另一个值，该函数被调用以调整页脚按钮的大小。我已经分离了调整大小的功能，问题就消失了。代码本身没有问题，只是执行顺序。

感谢大家的帮助!