多次替换html元素中的单词
多次替换html元素中的单词
提问于 2017-02-25 22:22:28
我有一组输入字段，它们必须用.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()));
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-25 22:51:41
问题是，在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>
Stack Overflow用户
发布于 2017-02-25 22:50:55
问题就在这里
confirm.html(confirmCopy.data("my-attr").replace("{"+className+"}", inputThis.val()));您正在使用相同的旧模板更新div。confirmCopy.data("my-attr")
每次替换之后，您应该更新var confirmCopy
这会很完美的。
$( document ).ready(函数(){ var confirmCopy =$(“.confirm”).data(“my”，$(".confirm").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);
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42462282
复制相关文章
相似问题
腾讯云开发者
