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'非表示にすることです。をクリックすると、 の場合は表示および非表示になります。#forwardcounter === maxThings#back'#forward''#back'counter === minThings

jsフィドル

$(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 に答える