1

我想要做的是加载页面，然后只显示下一个按钮，在我单击下一个之后，然后显示上一个和下一个按钮，然后继续浏览不同的 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>
4

3 回答 3

1

您要做的是单击#forward，显示'#back'和隐藏#forwardif counter === maxThings。单击#back时，显示'#forward'和隐藏'#back'if 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);
}
于 2013-04-01T06:05:21.923 回答
1

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

像

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

和

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

也许像http://jsfiddle.net/UFCeX/

希望这有帮助

于 2013-04-01T06:17:00.837 回答
1

你可以试试这个：

$("#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
    }
});
于 2013-04-01T06:18:56.770 回答