我有一个包含3个div的页面，一个接一个地显示。
第一个div显示三张图片，您可以通过点击图片下方的链接选择您最喜欢的图片，这也会将您带到div 2。
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');
});
$("#height").prop(function(){
var height = $('#height').prop('value);
});
});
*/
/*$(document).ready(function () {
if(document.getElement
});
*/
/*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">
<div id="div1">
<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">
<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-->
</div><!--Closes div1-->
<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>
</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">
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!
</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工作，我只是把它放在这里，以便你知道我到目前为止，并且任何人提供的解决方案在此期间不会破坏该代码。
答案 0 :(得分：1)
希望这可以让你开始：
https://jsfiddle.net/xszmdx3a/
在第三个div中创建一些空标记以保存内容：
<p>Style:<span id="style-d3"></span></p>
<p>Height: <span id="height-d3"></span></p>
我在第一个div中为你的链接添加了一个额外的类：
<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="casual">Casual »</a>
然后为图像添加事件处理程序：
$('.picture-link').click(function() {
var imgTag = $(this).parent().find('img')[0];
$(imgTag).clone().appendTo('#style-d3');
});
与其他领域类似：
$('#height').change(function() {
$('#height-d3').html($(this).val());
});
答案 1 :(得分：0)
您可以使用jQuery .val()函数选择文本框（以及大多数其他表单控件）的值。
e.g。在你的情况下：
var waistVal = $("#waist").val();
如果要在其他位置重新显示该值，则可以创建一个元素，例如<div>或<span>来包含该值，然后将新值注入其中，例如：
<p>Waist:</p><span id="waistVal"></span>
因此，您可以改为编写：
而不是上面的jQuery脚本 $("#waistVal").text($("#waist").val());
将立即显示＆＃34;腰部＆＃34; ＆＃34;腰部内的文本框＆＃34;跨度。您可以对所有其他文本框和下拉列表执行相同的操作。
其次，对于样式链接，它可能更加用户友好，使图像本身可以点击（并且只将文字作为标签）：
div1中的HTML：
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png" value="street">
Street
<p>Style:</p><span id="styleVal"></span><span id="styleImg"></span>
jQuery（在第一组超链接的click事件中）：
$('#div1').on('click', 'img', function (e) {
//this will be populated, but invisible until div3 is displayed
$("#styleVal").text($(this).attr("value"));
$(this).clone().appendTo("#styleImg");
$("#div1").hide();
$"(#div2").show();
});
答案 2 :(得分：0)
您可以尝试这种通用解决方案
CREATE TABLE entries (
entry_id INT NOT NULL,
date_of_exam DATETIME NOT NULL,
student_id INT,
subject_id INT,
PRIMARY KEY(entry_id),
FOREIGN KEY (student_id) REFERENCES students (student_id),
FOREIGN KEY (subject_id) REFERENCES subjects (subject_id));
$(document).ready(function () {
$('#div1').show();
$('#div2').hide();
$('#div3').hide();
var data = {
'div1': {},
'div2': {}
};
$('#div1').on('click', 'a', function (e) {
var imgTag = $(this).parent().find('img')[0];
data.div1.src = $(imgTag).attr('src');
$('#div1').hide();
$('#div2').show();
});
$('#div2').on('click', 'a', function (e) {
$(this).parent().find('form input, form select').each(function(){
data.div2[$(this).attr('name')] = $(this).val();
});
$('#div2').hide();
$('#div3').show();
setValues();
});
function setValues(){
$('#style-d3').append('<img src="' + data.div1.src + '">');
$.each(data.div2, function(key, val){
$('#' + key + '-d3').text(val);
});
}
});