Question

我有这个代码，可以动态地点击按钮创建div。在创建的div中，将要求用户输入并提交。在提交时，它将在同一个div中显示输入，然后创建另一个div，它将执行相同的操作。显示的值应该保留在每个div中，每个div应该只显示它的相关输入。

var i=1;
$(document).ready(function(){     
   $("#addCase").submit(function(event) {
    event.preventDefault(); 
    //adding div
    var idName ="Div_num_"+i;   
        $('.newValue').show(); 
        $('<div />').attr({
          'id' : idName       
          }).appendTo('#container').load("content.php", function() {   
              $('<h3>'+idName+'</h3>').prependTo($(this));    
            }); 
      i++;
    //showing input
      var $form = $("#addCase"),
      url = $form.attr("action"),      
      textInserted=$("#name").val();    
      $.post(url,function(){
        $(".insertedText").append(textInserted);   
      });
      $("#inputText").remove();
   });   
});

html：

<form id="addCase" method="post" action="">
  <div id="container"></div>
  <input id="addNew" type="submit" value="Add Case">        
</form>

content.php

<div id="inputText"><p>Text :<input name="name" id="name" type="text"/></p></div>
<div style="display:none;" class="newValue"><p> Inserted Text :<span class="insertedText"></span></p></div>

我不知道如何选择相关的跨度，因此仅插入的新值将仅显示在其中。

有人可以告诉我如何正确地做到这一点。提前感谢您的帮助。

例如。第一输入= A，第二输入= B. ，结果现在： div＃1显示AB，div＃2显示B. ，结果应该是： div＃1显示A和div＃2显示B

Answer 1

如果您只需要显示插入的值，请使用html()代替append() ...

html()用于设置元素的内容，该元素中的任何内容都被新内容完全替换

append()将参数指定的内容插入到匹配元素集中每个元素的末尾。

....
$.post(url,function(){
   $(".insertedText").html(textInserted);   //here
});

....

<强>已更新

var i=1;
$(document).ready(function(){     
$("#addCase").submit(function(event) {
event.preventDefault(); 
//adding div
var idName ="Div_num_"+i;   
    $('.newValue').show(); 
    $('<div />').attr({
      'id' : idName       
      }).appendTo('#container').load("content.php", function() {   
          $('<h3>'+idName+'</h3>').prependTo($(this));    
        }); 

//showing input
  var $form = $("#addCase"),
  url = $form.attr("action"),      
  textInserted=$("#name").val();    
  $.post(url,function(){
    $("#"+ idName).find(".insertedText").html(textInserted);   //updated here 
  });
  $("#inputText").remove();
  i++;  //increment to the end
});   
});

选择特定范围以显示用户输入

1 个答案: