jquery - 多次替换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

var confirmCopy = $(".confirm").data("my-attr", $(".confirm").html());

$(".btn").on("click", function() {

    var confirm = $(".confirm");

    $("[class*=input-]").each(function(){

        var inputThis = $(this);

        var className = $.grep(this.className.split(" "), function(v, i){

            return v.indexOf('input-') === 0;

        }).join();

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

});

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>