Question

我希望能够做的是加载页面，然后只显示下一个按钮，然后显示下一个按钮，然后显示previos和下一个按钮，然后继续浏览不同的div，然后到达最后一个div，隐藏下一个按钮，只显示上一个按钮。

Jquery表单滑块脚本

<script>
$(document).ready(function () {
    var oldOption;
    var currentOption;
    var counter = 1;
    var maxThings = 4;
    $("#2").hide();
    $("#3").hide();
    $("#4").hide();
    $("#forward").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter >= maxThings)) {
            counter++;
        }
        $("#" + counter).show();
    });

    $("#back").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter <= 1)) {
            counter--;
        }
        $("#" + counter).show();
    });
});
</script>

计算脚本

<script>
function calculate() {
    var total = (parseInt($('#studenttut option:selected').val()) + parseInt($('#campusrb>option:selected').val())) * parseInt($('#yearsatten>option:selected').val());
    $("#total").text(total);
}
</script>

HTML

<form>
<div id="1">
<table width="100%">
<tr>
    <td>Are you an In-State-Student?</td>
    <td align="right">
        <select id="studenttut">
            <option value="<?php echo $NIST; ?>">Yes $<?php echo $IST;  ?></option>
            <option value="<?php echo $NOST; ?>">No $<?php echo $OST; ?></option>
        </select>
    </td>
</tr>
</table>
</div>

<div id="2">
<table width="100%">
<tr>
    <td>Are you staying on campus?</td>
    <td align="right">
        <select id="campusrb">
            <option value="<?php echo $NBS; ?>">Yes $<?php echo $BS; ?>  </option>
            <option value="1">No $0</option>
        </select>
    </td>
</tr>
</table>
</div>

<div id="3">
<table width="100%">
<tr>
    <td>How many years are you planning to attend?</td>
    <td align="right">
        <select id="yearsatten">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="2">3</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
    </td>
</tr>
</table>
</div>

<div id="4">
<div id="total"><input type="button" onClick="calculate()" value="calculate"/></div>
</form>

</div>
<button id="back">Back</button>
<button id="forward">Next</button>

Answer 1

您要点击#forward，显示'#back'并隐藏#forward counter === maxThings。点击#back后，展示'#forward'并隐藏'#back' counter === minThings。

jsFiddle

$(document).ready(function () {
    var oldOption;
    var counter = 1;
    var maxThings = 4;
    var minThings = 1;
    $("#2").hide();
    $("#3").hide();
    $("#4").hide();
    $('#back').hide();

    $("#forward").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter >= maxThings)) {
            counter++;
        }
        $("#" + counter).show();
        $('#back').show();
        if (counter === maxThings) {
            $('#forward').hide();
        }
    });

    $("#back").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter <= 1)) {
            counter--;
        }
        $("#" + counter).show();
        $('#forward').show();
        if (counter === minThings) {
            $('#back').hide();
        }
    });
});

function calculate() {
    var total = (parseInt($('#studenttut option:selected').val()) + parseInt($('#campusrb>option:selected').val())) * parseInt($('#yearsatten>option:selected').val());
    $("#total").text(total);
}

Answer 2

您应该在第一页或最后一页处理后退和前进按钮的可见性

喜欢

if(counter==maxThings){
        $("#forward").hide();
    }

和

if(counter==1){
        $("#back").hide();
    }

可能有点像http://jsfiddle.net/UFCeX/

希望这个帮助

Answer 3

你可以尝试这个：

$("#forward, #back").hide(); //<--hides both buttons

if($('form').find('div').first().is(':visible')){ //<---check the first of the div is visible
  $("#forward").show(); //<----if true then show the forward button
  $("#forward").click(function () {
     $("#back").show(); //<-----on click of the forward btn show the back button
     $("#1").hide();
     $("#2").hide();
     $("#3").hide();
     $("#4").hide();
     if (!(counter >= maxThings)) {
        counter++;
     }
     $("#" + counter).show();
     if($('form').find('div').last().is(':visible')){ //<---if last div in the form is visible then
       $(this).hide(); //<---hide the forward button
     }
  });
}
if($('form').find('div').last().is(':visible')){ //<---check the last of the div is visible
  $("#back").click(function () {
     $("#1").hide();
     $("#2").hide();
     $("#3").hide();
     $("#4").hide();
    if (!(counter <= 1)) {
        counter--;
    }
    $("#" + counter).show();
    if($('form').find('div').first().is(':visible')){ //<--if first div is visible then
       $(this).hide(); //<----hide the back button
    }
});

如何在jquery中的最后一个div内容之后隐藏下一个按钮

3 个答案: