0
3つのdivが順番に表示されるページがあります。フォームに情報を入力してからjqueryでリコールする
最初のdivには3枚の写真を示して、あなたはdivのためにもかかる絵、以下のリンクをクリックすることで、あなたが一番好きかを選択2.
ディビジョン2は、入力ボックスの束とセレクタドロップダウンがある。すべてのフォームに記入したら、次のリンクをクリックしてdiv 3に移動します。
Div 3は選択した内容のレビューです。 div 1で選択した画像と、div 2のテキストボックス/セレクタに入れた内容が表示されるはずです。
私はこれをやり遂げる方法がわかりません。本当に苦労しています。感謝。
JSFiddle - https://jsfiddle.net/7yuuz8d4/27/
/* JS - */
$(document).ready(function() {
$('#div1').show();
$('#div2').hide();
$('#div3').hide();
$('#div1').on('click', 'a', function (e) {
$('#div1').hide();
$('#div2').show();
});
$('#div2').on('click', 'a', function (e) {
$('#div2').hide();
$('#div3').show();
});
});
/*$(document).ready(function() {
$('#div1').on('click', 'a', function (e) {
var stylechoice = $(this).attr('value');
});
\t \t \t $("#height").prop(function(){
\t \t \t var height = $('#height').prop('value);
\t \t \t });
});
\t */
/*$(document).ready(function() {
if(document.getElement
});
\t */
/*if(document.getElementById('.col-md-4').clicked) {
$("#casual").show("#style1");
} else if {
$("#street").show("#style1");
} else if {
$("#classic").show("#style1");
});*/<!-- Html -->
<!doctype html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<div class="container">
\t <div id="div1">
\t <h2>Pick your style</h2>
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual">Casual »</a>
</div><!--Closes Col-md-4-->
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
\t <a class="btn btn-primary btn-lg" href="#div2" role="button" value="street">Street »</a>
</div><!--Closes Col-md-4-->
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="classic">Classic »</a>
</div><!--Closes Col-md-4-->
\t </div><!--Closes div1-->
\t <div id="div2">
<h3>Measurements</h3>
<h5>Measurements can be in inches or centimeters, just please notate which you use</h5>
<form>
Height:<br>
<input type="text" name="height" id="height"><br>
Neck:<br>
<input type="text" name="neck" id="neck"><br>
Arms:<br>
<input type="text" name="arms" id="arms"><br>
Waist:<br>
<input type="text" name="waist" id="waist"><br>
Legs:<br>
<input type="text" name="legs" id="legs"><br>
Shoes:<br>
<input type="text" name="shoes" id="shoes"><br>
Shirt size:<br>
<select>
<option value="small" id="small">Small</option>
<option value="medium" id="medium">Medium</option>
<option value="large" id="large">Large</option>
<option value="xlarge" id="xlarge">X-Large</option>
<option value="xxlarge" id="xxlarge">XX-Large</option>
\t \t </select>
</form>
<a class="btn btn-primary btn-lg" href="#div3" role="button">Next »</a>
</div><!--Closes div2-->
<div id="div3">
<h3>Review</h3>
<p>Here's the info you gave us, please double check it:</p>
<p>Style:</p>
<p>Height:</p>
<p>Neck:</p>
<p>Arms:</p>
<p>Waist:</p>
<p>Legs:</p>
<p>Shoes:</p>
<p>Shirt size:</p>
<p>Finally, any notes for our fashion aids?</p>
<textarea name="message" rows="10" cols="100">
\t Any other concerns you have we should know about? Do you have big thighs, long neck, big arms, etc. anything and anything that can help with the fitting of your clothing is extremely helpful!
\t </textarea>
<div id="display">
<a class="btn btn-primary btn-lg" href="success.html" role="button">Submit »</a>
</div>
</div><!--Closes div3-->
</div><!--Closes container-->
</body>注：私は私が上で動作しようとしている、として失敗してきたものをコメントアウト。私はdivのjqueryの表示/非表示を行っています。ここに入れて、これまでに何があったのかを知ることができます。
はフィドルが正常に動作しているように思えるこの一般的な解決策を試すことができます。あなたのフィーリングにはjQueryリファレンスが含まれています - https://jsfiddle.net/7yuuz8d4/28/ – Developer
あなたのコードはあなたのフィドルで完璧に動作します。 ** JQueryファイルを含める必要があります。** - ブラウザのコンソールを確認すると、 –
私は皆さんが私の投稿を読んでいるとは思わないと言います。フィドルは、divを隠したり表示したりするのに役立ちます。何を助けてくれるのですか？どの写真が選択されたのか、そしてdiv1〜2のフォームに入力されたものがdiv3の対応する行に出力されたことを思い出す必要があります。 –