jQuery: When button is clicked check what div is visible then do some stuff

I have the following jquery:

$("#quiz-prev, #quiz-next").click(function () {
    $("ul.chart li").removeClass("active");

    if($("#page1:visible")) {
        $("ul.chart li.one").addClass("active");
        $("p.step span").html("1");
        $("#quiz-prev").hide();
        $("#quiz-next").show();
    }
    if($("#page2:visible")) {
        $("ul.chart li.one, ul.chart li.two").addClass("active");
        $("p.step span").html("2");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page3:visible")) {
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three").addClass("active");
        $("p.step span").html("3");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page4:visible")) {
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three, ul.chart li.four").addClass("active");
        $("p.step span").html("4");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page5:visible")) {
        alert('test');
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three, ul.chart li.four, ul.chart li.five").addClass("active");
        $("p.step span").html("5");
        $("#quiz-prev").show();
        $("#quiz-next").hide();
    }
});

    $("#quiz-prev").click(function () {
        $(".page:visible").hide().prev().show();
    });
    $("#quiz-next").click(function () {
        $(".page:visible").hide().next().show();
    });

The idea is that when the prev and next buttons are pressed the code checks which div is visible and then would hide or show the buttons, hide or show the next or previous section开发者_JAVA技巧 div and add a class to a chart. However it jumps straight to the #page5 code even though it's not visible on the page... any ideas what is wrong with the code?

Here is the HTML:

<div class="page-navigation Clearfix">
                                <a id="quiz-prev" class="Prev" href="javascript:void(false);" style="display:none;">
                                    <span>Prev</span>
                                </a>
                                <a id="quiz-next" class="Next" href="javascript:void(false);">
                                    <span>Next</span>
                                </a>
                            </div>

<p class="step">Step <span>1</span> / 5</p>

                            <ul class="chart Clearfix">
                                <li class="one active"></li>
                                <li class="two"></li>
                                <li class="three"></li>
                                <li class="four"></li>
                                <li class="five"></li>
                            </ul>


<div id="page1" class="page" style="display:block;">
</div>
<div id="page2" class="page" style="display:none;">
</div>
<div id="page3" class="page" style="display:none;">
</div>
<div id="page4" class="page" style="display:none;">
</div>
<div id="page5" class="page" style="display:none;">
</div>

---

Hm, try re-factoring your code a bit: http://jsfiddle.net/rkw79/6UNrv/

Just call SetActivePage() when the page first loads, and keep in mind that currpage/maxpage are working off of zero-index.

edit: also, remove all your active and display:none markup in your aspx, the SetActivePage() will take care of it.

var currpage = 0;
var maxpage = 4;

$('.Next').click(function(e) {
  currpage += (currpage==maxpage) ? 0 : 1;
  SetActivePage();
});

$('.Prev').click(function(e) {
  currpage -= (currpage==0) ? 0 : 1;
  SetActivePage();
});

function SetActivePage() {
  $('div.page').each(function(i,o) {
    $(o).toggle(i==currpage);
  });

  $('p.step span').html(currpage+1);

  $('ul.chart li').each(function(i,o) {
    $(o).toggleClass('active',i <= currpage);
  });

  $('.Next').toggle(currpage<maxpage);
  $('.Prev').toggle(currpage>0);
}

---

Replace your javascript with this:

$("#quiz-prev, #quiz-next").click(function () {
    $("ul.chart li").removeClass("active");

    if($("#page1").is(":visible")) {
        $("ul.chart li.one").addClass("active");
        $("p.step span").html("2");
        $("#quiz-prev").hide();
        $("#quiz-next").show();
    }
    if($("#page2").is(":visible")) {
        $("ul.chart li.one, ul.chart li.two").addClass("active");
        $("p.step span").html("3");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page3").is(":visible")) {
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three").addClass("active");
        $("p.step span").html("4");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page4").is(":visible")) {
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three, ul.chart li.four").addClass("active");
        $("p.step span").html("5");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page5").is(":visible")) {
        alert('test');
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three, ul.chart li.four, ul.chart li.five").addClass("active");
        $("p.step span").html("6");
        $("#quiz-prev").show();
        $("#quiz-next").hide();
    }
});

    $("#quiz-prev").click(function () {
        $(".page:visible").hide().prev().show();
    });
    $("#quiz-next").click(function () {
        $(".page:visible").hide().next().show();
    });