使用div id如何将值文本输入到另一个div

时间:2016-08-19 08:32:10

标签: javascript jquery

我得到长度和广度的警报值。但我无法在下一个div类中打印文本我正在使用jquery。

HTML:

<input type="hidden" id="len" name="len" value="len" />
<input type="hidden" id="bre" name="bre" value="bre" />

使用id:

打印此div中的值
 <div id="length"></div>
 <div id="breadth"></div>

Jquery的:

var len = ($('#len').attr('value'));
$('#length').text(len);
var bre =($('#bre').attr('value'))
$('#breadth').text(bre);

Jquery完整的提交代码:

<script type="text/javascript">
  $(window).load(function()
   {
        $('.green').hide();
        $('.red').show();
        });
         $(document).ready(function(){
          $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="red")
             {

    $(".box").not(".red").hide();
        $(".red").show();
       $(document).ready(function() {
       $('#lenbredth').validate({
        rules: {
        length: {
        required: true,
        number: true,
        range: [48, 84]
        },
        breadth: {
        required: true,
        number: true,
        range: [24, 78]
        }
        },enter code here
        messages: {

        length: {
        required: 'Please select a template'
        },
        breadth: {
        required: 'Please select a template'
        }
        },
        submitHandler: function(){
        $('div[id ^=div]').hide();
        $("#div4").show();
        var dataString = $(this.currentForm).serialize();
        var lenbreath = dataString.split('&');
         var bed1= lenbreath[0];
         var len = bed1.substr(7,9);
         alert(len);
          $("#len").val(len);
         var bed2= lenbreath[1];
         var bre = bed2.substr(8,10);
         $("#bre").val(bre);
         return false;
        }

        });
        $("#summer5").click(function() {
        $("#lenbredth").submit();
        });
        $("#length").change(function(){
        var length =$(this).val();
        $("#breadth").change(function(){
        var breadth =$(this).val();
        var lenbre= length * breadth;
        //alert(lenbre);
        var result =length.concat(breadth);
        var len = (length * breadth) ;
        });
        });
        });
    }
    if($(this).attr("value")=="green")
    {
        $(".box").not(".green").hide();
        $(".green").show();

          $(window).load(function()
        {
        $('.dimension').hide();
        $('#d1').show();
        });


        $('.bed_type ul li ').click(function()
        {
        var i = $(this).index();
        $('.dimension').hide();
        $('#d' + (i+1)).show();
        var type  ='b' + (i+1);
        document.getElementById(type).addEventListener("click", bedtype);
         });
        $('.dimension ul li').click(function () {
        var i = $(this).index();
        var single  ='single' + (i+1);
        //alert(single);
        var doubles  ='doubles' + (i+1);
        var queen  ='queen' + (i+1);
        var king  ='king' + (i+1);

        document.getElementById(single).addEventListener("click", price);
        document.getElementById(doubles).addEventListener("click", price);
        document.getElementById(queen).addEventListener("click", price);
        document.getElementById(king).addEventListener("click", price);


        });
        function price() 
        {
        $(document).ready(function() {
         $('#radioselection').validate({
         submitHandler: function(){
        $('div[id ^=div]').hide();
        $("#div4").show();
        var dataString = $(this.currentForm).serialize();
             var lenbre = dataString.substr(22,27);
             var arr = lenbre.split('*');
             var len= arr[0];
            $("#len").val(len);
           var bre= arr[1];
           $("#bre").val(bre);

         return false;
        }
        });
        $("#summerss").click(function() {
        $("#radioselection").submit();
        });
        var price_btn=this.id;

        var price_value = document.getElementById(price_btn).value;
        var arr = price_value.split('*');
        });
        }
        }
        });
       });
      $(document).ready(function()
       {
      $('#plainpattern').validate({
          rules: {
           plainpattern:{
                required: true
            }
        },
        messages: {
           plainpattern:{
                required: 'Please select the image plain or pattern'
             }
           },
        submitHandler: function(){
        $('div[id ^=div]').hide();
        $("#div5").show();
        var len = ($('#len').attr('value'));
        $('#length').text($('#len').val());
        var bre =($('#bre').attr('value'))
        $('#breadth').text($('#bre').val()); 
        var dataString = $(this.currentForm).serialize();
        var plainpattern = dataString.substr(13,16);
        $("#mattersplainpatters").text(plainpattern + ' "');
        return false;
        }
        });
        $("#summer7").click(function() {
        $("#plainpattern").submit();
        });
        $('li').click( function(){
        $('li').removeClass('selected');
       $(this).addClass('selected');
        var legend = $(this).children("input[type=radio]").val();
        });
        });

2 个答案:

答案 0 :(得分:1)

试试这个

$('#length').text($('#len').val());
$('#breadth').text($('#bre').val());

答案 1 :(得分:0)

在包含jquery并在$(document).ready()$(function(){})

中编写jquery代码之后,它工作了

&#13;
&#13;
$(function(){
  var len = ($('#len').attr('value'));
$('#length').text(len);
var bre =($('#bre').attr('value'))
$('#breadth').text(bre);
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="len" name="len" value="len" />
<input type="hidden" id="bre" name="bre" value="bre" />
<div id="length"></div>
 <div id="breadth"></div>
&#13;
&#13;
&#13;

为了获得价值而另外使用

$('#len').val();

获取len的值