Ich habe eine Seite mit 3 Divs, die nacheinander angezeigt werden.Eingabe von Informationen in Formulare, dann ruft es über jquery
Die erste div zeigt drei Bilder, wählen Sie die Ihnen am besten gefällt, indem Sie den Link unter dem Bild klicken, die Sie auch 2.
Div 2 eine Reihe von Eingabefeldern und ein Drop-Down-Wähler auf div nimmt . Sobald Sie alle Formulare ausgefüllt haben, klicken Sie auf den nächsten Link, der Sie zu div 3 bringt.
Div 3 ist eine Überprüfung Ihrer Auswahl. Es sollte zeigen, welches Bild Sie in div 1 ausgewählt haben, und was Sie in den Textfeldern/Selektor in div 2 setzen.
Ich habe keine Ahnung, wie man das macht, und ich wirklich kämpfen, jede und alle Hilfe ist geschätzt.
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>Anmerkung: Ich bemerkte, was ich habe, zu arbeiten versucht und sich nicht an. Ich habe die div show/hide jquery arbeiten, ich bin nur hier setzen, so dass Sie wissen, was ich bisher habe, und dass die Lösung, die jemand bietet nicht diesen Code in der Zwischenzeit zu brechen.
Scheint, wie die Geige funktioniert gut; nur dass Sie jQuery-Referenz in der Geige enthalten - https://jsfiddle.net/7yuuz8d4/28/ – Developer
Ihr Code funktioniert perfekt in Ihrer Fiddle. ** Sie müssen nur JQuery-Datei ** - Wenn Sie die Browser-Konsole überprüfen, es sagt Ihnen –
Ich glaube nicht, dass Sie meinen Beitrag lesen. Die Geige funktioniert, um divs zu verstecken/zu zeigen, das ist nicht das, worum ich um Hilfe bitt. Ich muss mich erinnern, welches Bild ausgewählt wurde und was in den Divs 1-2 eingegeben wurde und diese Informationen in den entsprechenden Zeilen von Div3 ausgeben. –