2016-11-09 19 views
0

我有一个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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a> 
 
     </div> 
 
     
 
     </div><!--Closes div3--> 
 
     </div><!--Closes container--> 
 
     
 
</body>

注:我评论了什么,我一直在努力工作,并与失败。我有div显示/隐藏jquery的工作,即时将它放在这里,以便您知道我到目前为止,并且任何人提供的解决方案都不会中断此代码。

+1

好像小提琴工作正常;只是你的力量包括在小提琴中的jQuery参考 - https://jsfiddle.net/7yuuz8d4/28/ – Developer

+0

你的代码完美地在你的小提琴中工作。 **你只需要包括JQuery文件** - 如果你检查浏览器控制台,它告诉你 –

+0

我不认为你们看我的帖子。小提琴的作品隐藏/显示div,这不是什么即时通讯寻求帮助。我需要回想一下,选择了什么图片,以及在div1-2中输入了什么内容,然后在div3的相应行中输出该信息。 –

回答

1

这应该可以让你开始:

https://jsfiddle.net/xszmdx3a/

在你的第三格创建一些空的标签来保存内容:

<p>Style:<span id="style-d3"></span></p> 
<p>Height: <span id="height-d3"></span></p> 

我增加了一个额外的类在您的链接第一格:

<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="casual">Casual &raquo;</a> 

然后添加一个事件韩dler用于图像:

 $('.picture-link').click(function() { 
      var imgTag = $(this).parent().find('img')[0]; 
      $(imgTag).clone().appendTo('#style-d3'); 
     }); 

类似地,对于其他字段:

 $('#height').change(function() { 
      $('#height-d3').html($(this).val()); 
     }); 
0

可以使用jQuery .val()功能选择的文本框(以及大多数其他表单控件)的值。

例如你的情况:

var waistVal = $("#waist").val(); 

如果你想在其他地方重新显示值,那么你可以创建一个元素,如<div><span>包含的值,然后注入新的价值到它,比如:

<p>Waist:</p><span id="waistVal"></span> 

因此,而不是上面的jQuery脚本,你可以代替写:

$("#waistVal").text($("#waist").val()); 

这将立即显示出“腰”文本框的值在“腰部”范围内。您可以对所有其他文本框和下拉菜单执行相同的操作。

其次,对于链接样式,它可能更人性化,使图像本身可点击(和只是有词作为标签只):

HTML中DIV1:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png" value="street"> 
Street 

HTML在DIV3:

<p>Style:</p><span id="styleVal"></span><span id="styleImg"></span> 

的jQuery(对于第一套超链接的点击事件中):

$('#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(); 
}); 
0

你可以试试这个通用的解决方案

$(document).ready(function() { 
 
      $('#div1').show(); 
 
      $('#div2').hide(); 
 
      $('#div3').hide(); 
 
      
 
      var data = { 
 
      \t 'div1': {}, 
 
       'div2': {} 
 
      }; 
 

 
      $('#div1').on('click', 'a', function (e) { 
 
      \t \t var imgTag = $(this).parent().find('img')[0]; 
 
       \t data.div1.src = $(imgTag).attr('src'); 
 
       
 
       $('#div1').hide(); 
 
       $('#div2').show(); 
 
      }); 
 

 
      $('#div2').on('click', 'a', function (e) { 
 
      \t \t $(this).parent().find('form input, form select').each(function(){ 
 
       \t data.div2[$(this).attr('name')] = $(this).val(); 
 
       }); 
 
      
 
       $('#div2').hide(); 
 
       $('#div3').show(); 
 
                    
 
       setValues(); 
 
      }); 
 
      
 
      function setValues(){ 
 
      \t \t $('#style-d3').append('<img src="' + data.div1.src + '">'); 
 
       \t $.each(data.div2, function(key, val){ 
 
       \t \t $('#' + key + '-d3').text(val); 
 
       \t }); 
 
      } 
 
     }); 
 
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.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 picture-link" href="#div2" role="button" value="casual">Casual &raquo;</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 picture-link" href="#div2" role="button" value="street">Street &raquo;</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 picture-link" href="#div2" role="button" value="classic">Classic &raquo;</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 name="size"> 
 
        <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 &raquo;</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:<span id="style-d3"></span></p> 
 
    <p>Height: <span id="height-d3"></span></p> 
 
    <p>Neck: <span id="neck-d3"></span></p> 
 
    <p>Arms: <span id="arms-d3"></span></p> 
 
    <p>Waist: <span id="waist-d3"></span></p> 
 
    <p>Legs: <span id="legs-d3"></span></p> 
 
    <p>Shoes: <span id="shoes-d3"></span></p> 
 
    <p>Shirt size: <span id="size-d3"></span></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 &raquo;</a> 
 
    </div> 
 
    
 
    </div><!--Closes div3--> 
 
    </div><!--Closes container--> 
 
    
 
    
 
    </body> 
 

相关问题