Question

我正在以这个网站的方式创建一个带滑动面板的用户界面：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（{＆＃39; margin-top＆＃39;：0，＆＃39; z- index＆＃39;：（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

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

感谢您的帮助！

JQuery .css（）函数不会更改所有属性

1 个答案: