Question

我有以下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();
    });

这个想法是，当按下prev和next按钮时，代码会检查哪个div是可见的，然后隐藏或显示按钮，隐藏或显示下一个或上一个div部分并将类添加到图表中。然而，它直接跳转到＃page5代码，即使它在页面上不可见...任何想法代码有什么问题？

这是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>

Answer 1

嗯，请尝试重新分解您的代码：http://jsfiddle.net/rkw79/6UNrv/

只需在首次加载页面时调用SetActivePage()，并记住currpage / maxpage正在使用零索引。

编辑：同样，在您的aspx中移除所有active和display:none标记，SetActivePage()将会处理它。

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);
}

Answer 2

用以下内容替换您的javascript：

$("#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();
    });

jQuery：当点击按钮时，检查div是可见的，然后做一些事情

2 个答案: