Ersetzen Sie Wörter in HTML-Element mehrmals

Question

Ich habe diese Reihe von Eingabefeldern, die jedes Token durch seinen Wert in .confirm ersetzen muss. Ich möchte es jedes Mal ersetzen können, wenn ich auf .btn klicke. Aber es funktioniert nur mit dem letzten Eingabefeld.

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

Das Problem ist, dass in jeder Iteration der each Schleife, die Sie von den confirmCopy Daten Ihrer ersetzen beginnen, anstatt die Ergebnisse der Akkumulation

ist hier eine Korrektur.

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

Problem ist hier

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

Du alte Vorlage div zu aktualisieren. confirmCopy.data("my-attr")

Nach jedem ersetzen Sie diese perfekt funktioniert var confirmCopy

aktualisieren sollte.

$ (document) .ready (function() {var confirmCopy = $() Daten ("my-attr " $() html())" bestätigen.". "Bestätigen.";.

$(".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); 

    }); 
}); 
});