0

ボタンのオンクリックで動的に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>

関連するスパンを選択する方法がわからないため、挿入された新しい値のみがその場所にのみ表示されます。

誰かがそれを適切に行う方法を教えてもらえますか。よろしくお願いします。

例えば。1 番目の入力 = A、2 番目の入力 = B 、現在の結果: div#1 show AB および div#2 show B 、結果は次のようになります: div#1 show A および div#2 show B

4

1 に答える 1

0

挿入された値のみを表示する必要がある場合は、append（ ） の代わりにhtml（）を使用してください。

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
});   
});
于 2012-12-31T05:24:07.677 に答える