我想要做的是加载页面,然后只显示下一个按钮,在我点击下一个之后,然后显示上一个和下一个按钮,然后继续浏览不同的div,然后到达最后一个div,隐藏下一个按钮,只显示上一个按钮。
Jquery表单 slider 脚本
<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>
最佳答案
您想要做的是点击#forward
,显示'#back'
并隐藏#forward
(如果counter =) == maxThings
。单击 #back
时,如果 counter === minThings
,则显示 '#forward'
并隐藏 '#back'
.
$(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);
}
关于html - 如何隐藏jquery中最后一个div内容之后的下一个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15738390/