Question

我有这组输入字段必须用.confirm中的值替换每个标记。我希望每次点击.btn都可以替换它。但它只适用于最后一个输入字段。

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 数据开始替换，而不是累积结果。

这是一个更正：

＆＃13;

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;
});

＆＃13;

<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>

＆＃13;

Answer 2

问题在这里

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

您正在使用相同的旧模板来更新div。 confirmCopy.data("my-attr")

每次更换后，您都应该更新var confirmCopy

这将是完美的。

$（document）.ready（function（）{ var confirmCopy = $（＆＃34; .confirm＆＃34;）。data（＆＃34; my-attr＆＃34;，$（＆＃34; .confirm＆＃34;）。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);

   });
 });
});

多次替换html元素中的单词

2 个答案: