个人中心
gpt4 book ai didi

javascript - 在表单中输入信息，通过 jquery 调用时

转载 作者：行者123 更新时间：2023-12-03 05:41:36 27 4
gpt4 key购买 nike

我有一个包含 3 个 div 的页面，这些 div 依次显示。

第一个 div 显示三张图片，您可以通过单击图片下方的链接来选择您最喜欢的图片，这也会将您带到 div 2。

Div 2 是一堆输入框和一个下拉选择器。填写完所有表格后，单击下一个链接，将您带到第 3 部分。

第 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 &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="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-->
    	</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 &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">
    	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 &raquo;</a>
        </div>
        
        </div><!--Closes div3-->
        </div><!--Closes container-->
        
</body>

注意:我注释掉了我一直在尝试做的事情以及失败的事情。我有 div show/hide jquery 工作，我只是把它放在这里，这样你就知道我到目前为止有什么，并且任何人提供的解决方案都不会同时破坏该代码。

最佳答案

希望这可以帮助您开始:

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 &raquo;</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());
        });

关于javascript - 在表单中输入信息，通过 jquery 调用时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40503687/

27 4 0
文章推荐： javascript - 从 selenium webdriver 中的 flash 播放器读取内容
文章推荐： javascript - 观察者检查鼠标移动何时停止
文章推荐： javascript - JSHint 不接受文件内容作为参数
文章推荐： javascript - 是否有一个事件可以检测 Javascript 中是否设置了某个属性？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com