1
私はjQueryを学び、偽の複数ページフォームを作成しようとしていますが、次のボタンは問題なく動作していますが、前のページボタンは表示されません。同じロジックに基づいているので、私の問題の原因を突き止めることはできません（前のページインデックスではなくインデックス1に戻る）。Faux jquery pages
ご協力いただければ幸いです。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Faux Multipage Form</title>
<style>
#container {
font-family: arial;
width: 600px;
margin: 0 auto;
}
form.multipage {
width: inherit;
}
fieldset {
width: inherit;
background: #fff;
border: none;
}
legend {
font-size: 2em;
}
label {
display: block;
}
button {
background: black;
color: #fff;
border: #222;
border-radius: 20px;
padding: 5px 20px;
display: block;
margin: 20px 10px;
clear: left;
}
button.next { float: right;}
button.previous { float: right;}
button:hover {
background: #666;
}
input[type=text] {
width: 550px;
}
</style>
</head>
<body>
<div id="container">
<form id="form" class="multipage" name="checkout">
<fieldset>
<legend>Contact Details</legend>
<label for="your_name">Your Name</label>
<input type="text" value="" name="your_name">
<label for="your_phone">Your Phone</label>
<input type="text" value="" name="your_phone">
<label for="your_address">Your Address</label>
<input type="text" value="" name="your_address">
</fieldset>
<fieldset>
<legend>Shipping Details</legend>
<label for="shipping_name">Shipping Name</label>
<input type="text" value="" name="shipping_name">
<label for="shipping_phone">Shipping Phone</label>
<input type="text" value="" name="shipping_phone">
<label for="shipping_address">Shipping Address</label>
<input type="text" value="" name="shipping_address">
</fieldset>
<fieldset>
<legend>Payment</legend>
<label for="payment_type">Payment Type</label>
<select name="payment_type">
<option>VISA</option>
<option>MasterCard</option>
<option>Diners</option>
</select>
<label for="creditcard">Credit Card</label>
<input type="text" value="" name="creditcard">
</fieldset>
<fieldset>
<legend>Review</legend>
<div id="review_order" style="height: 200px; background: #efefef"></div>
<input type="submit" name="submit">
</fieldset>
</form>
</div> <!--! end of #container -->
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.js"><\/script>')</script>
<script type="text/javascript">
var multipageForm = {
init: function(formName) {
var form = 'form[name=' + formName + ']';
var fieldsets = $(form + ' fieldset');
var totalFieldSets = fieldsets.length;
for (var i = 0; i < fieldsets.length; i++) {
var fieldset = fieldsets[i];
// Hide the fieldsets
multipageForm.hidePages(fieldset, i);
// Create the buttons
multipageForm.createButtons(fieldset, i, totalFieldSets, form);
};
},
createButtons: function(fieldset, index, totalFieldSets, form) {
var thisPage = index;
index = index + 1,
nextPage = index,
prevPage = index - 1;
if (index != totalFieldSets) {
var nextButton = '<button class="next" date-role="button" data-gotopage="' + nextPage + '">Next</button>';
$(fieldset).append(nextButton).on('click', 'button.next', function(event){
var nextLink = $(this).data('gotopage');
$(form + ' fieldset:eq(' + thisPage + ')').hide();
$(form + ' fieldset:eq(' + nextLink + ')').show();
return false;
});
}
if (index != 1) {
var prevButton = '<button class="previous" date-role="button" data-gotopage="' + prevPage + '">Previous</button>';
$(fieldset).append(prevButton).on('click', 'button.previous', function(event){
var nextLink = $(this).data('gotopage');
$(form + ' fieldset:eq(' + thisPage + ')').hide();
$(form + ' fieldset:eq(' + PrevLink + ')').show();
return false;
});
}
},
hidePages: function(fieldset, index) {
// Hide all fieldsets except the first fieldset
if (index > 0) {
$(fieldset).hide();
}
}
};
multipageForm.init('checkout');
</script>
</body>
</html>
を;'（一貫性のため） 。 –
元のコードでは、インデックスは1だけインクリメントされます。私はそれを保持していました。インデックスを別の場所で使用する場合に備えて、そうでない場合は、nextPageのインデックスを倍増する必要があります。 – Joe
Heh。振り返ってみると、そのコメントは意味をなさない。 :) –