多次用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

問題是在這裏

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

您正在使用相同的舊模板更新股利。 confirmCopy.data("my-attr")

每次更換後，你應該更新變種confirmCopy

這將工作完美。

$（文件）。就緒（函數（）{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); 

    }); 
}); 
});