jquery css在按钮单击时设置可见性

时间:2012-12-01 18:51:52

标签: jquery html css

我正试图在不同的边际上设置指标的可见性。 我有一个滑块有两个按钮接下来n prev。我试图显示活动幻灯片编号点击下一步按钮我这样做

$("#BtnNext").click(function (event) {
            {
                if ($('#MainContainer').css("marginLeft") == "0px") {
                    $('#FirstPage').css("visibility", "hidden");
                    $('#SecondPage').css("visibility", "visible");
                    $('#ThirdPage').css("visibility", "Hidden");
                    $('#FourthPage').css("visibility", "Hidden");
                }
                if ($('#MainContainer').css("marginLeft") == "-1425px") {
                    $('#FirstPage').css("visibility", "Hidden");
                    $('#SecondPage').css("visibility", "Hidden");
                    $('#ThirdPage').css("visibility", "visible");
                    $('#FourthPage').css("visibility", "Hidden");
                }
                if ($('#MainContainer').css("marginLeft") == "-2850px") {
                    $('#FirstPage').css("visibility", "Hidden");
                    $('#SecondPage').css("visibility", "Hidden");
                    $('#ThirdPage').css("visibility", "Hidden");
                    $('#FourthPage').css("visibility", "visible");
                }
                if ($('#MainContainer').css("marginLeft") == "-4275px") {
                    $('#FirstPage').css("visibility", "visible");
                    $('#SecondPage').css("visibility", "Hidden");
                    $('#ThirdPage').css("visibility", "Hidden");
                    $('#FourthPage').css("visibility", "Hidden");
                }
            }
        });

但问题是,在第一轮再次进行第一轮幻灯片成功完成1轮后,第一个指示器不会进入可见模式。 请帮帮我

1 个答案:

答案 0 :(得分:0)

这应该在设置默认值时起作用:

$('#BtnNext').click(function (event) {
    var marginLeft = $('#MainContainer').css('marginLeft'),
        pages = $('#FirstPage, #SecondPage, #ThirdPage, #FourthPage'),
        page = '';
    switch case (marginLeft) {
    case '0px':
        page = '#SecondPage';
        break;
    case '-1425px':
        page = '#ThirdPage';
        break;
    case '-2850px':
        page = '#FourthPage';
        break;
    default:
        page = '#FirstPage';
    }
    pages.css('visibility', 'hidden').filter(page).css('visibility', 'visible');
});

如果不起作用,请设置jsFiddle并在您的问题中链接到该链接。