html要素内の単語を複数回置き換える

Question

私は、このトークンを.confirmの値で置き換えなければならない入力フィールドを持っています。私が.btnをクリックするたびにそれを置き換えることができるようにしたい。しかし、それは最後の入力フィールドでのみ機能します。

Fiddle

HTML

<div class="inputs"> 
    <input class="input-1 anotherclass" type="text"> <br> 
    <input class="input-2 anotherclass" type="text"><br> 
    <input class="input-3 anotherclass" type="text"> <br> 
    <input class="input-4 anotherclass" type="text"> 
</div> 

<div class="confirm"> 
    {input-1} <br> 
    {input-2} <br> 
    {input-3} <br> 
    {input-4} 
</div> 

<button class="btn">edit</button> 

JS

Answer 1

問題がeachループの反復ごとに、あなたがあなたの代わりに結果を蓄積、confirmCopyデータから置き換えを開始することである

ここでは補正である：

var confirmCopy = $(".confirm").data("my-attr", $(".confirm").html()); 
 
$(".btn").on("click", function() { 
 
    var confirm = $(".confirm"); 
 
    var s = confirmCopy.data("my-attr"); 
 
    $("[class*=input-]").each(function(){ 
 
     var inputThis = $(this); 
 
     var className = $.grep(this.className.split(" "), function(v, i){ 
 
      return v.indexOf('input-') === 0; 
 
     }).join(); 
 
     s = s.replace("{"+className+"}", inputThis.val()); 
 
    }); 
 
    confirm.html(s); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="inputs"> 
 
    <input class="input-1 anotherclass" type="text"> <br> 
 
    <input class="input-2 anotherclass" type="text"><br> 
 
    <input class="input-3 anotherclass" type="text"> <br> 
 
    <input class="input-4 anotherclass" type="text"> 
 
</div> 
 

 
<div class="confirm"> 
 
    {input-1} <br> 
 
    {input-2} <br> 
 
    {input-3} <br> 
 
    {input-4} 
 
</div> 
 

 
<button class="btn">edit</button>

Answer 2

問題はここにあなたがdiv要素を更新するために、同じ古いテンプレートを使用している

confirm.html(confirmCopy.data("my-attr").replace("{"+className+"}", inputThis.val())); 

です。すべての後

confirmCopy.data("my-attr")あなたはvarがconfirmCopy

これは完璧に動作します更新する必要があります交換してください。

$（ドキュメント）.ready（関数（）{ VAR confirmCopy = $（）のデータ（ "私の-ATTR " $（）HTML（））" を確認してください。"。 "を確認してください。";。

。

$(".btn").on("click", function() { 
    var confirm = $(".confirm"); 
    var temp = confirmCopy.data("my-attr"); 
    $("[class*=input-]").each(function(){ 
    var inputThis = $(this); 


    var className = $.grep(this.className.split(" "), function(v, i){ 
    return v.indexOf('input-') === 0; 
     }).join(); 

    temp = temp.replace("{"+className+"}", inputThis.val()); 

    confirm.html(temp); 

    }); 
}); 
});