我有一个3个div显示一个接一个的页面。在窗体中输入信息,然后通过jquery调用它
第一个div显示三张图片,你可以选择你最喜欢通过单击图片,这也需要下面的链接你的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的相应行中输出该信息。 –