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

Question

我正在尝试在不同的边距上设置指标的可见性。 我有一个滑块，有两个按钮 next 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");
                }
            }
        });

但问题是，成功完成一轮后，当其再次进入第一张幻灯片时，第一个指示器不会进入可见模式。 请帮助我

Answer 1

这应该可以工作，因为它设置了默认值：

$('#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 并在您的问题中链接到它。