Javascript字符串替换无效

我的结构如下：

<span class="h1">Color green</span>
<div class="swatchesContainer">
    <img title="green" src="/"/>
    <img title="blue" src="/"/>
</div>

我从te图像中获取所有

标题

属性，并在同一个foreach函数中从te文本中替换它们

但新颜色会在现有颜色之后继续添加

---

您的逻辑有缺陷。在循环中，您重复覆盖

字符串
变量：

string = product_name.replace(...)

在循环结束时，您将看到
“绿色”。替换（“蓝色”，“蓝色”）
->
“绿色”

更改这些行：

var string;
// ...
string = product_name.replace(jQuery(this).attr('title').trim(),' ');

对这些：

var string = product_name;
// ...
string = string.replace(jQuery(this).attr('title').trim(),' ');



话虽如此，我还是希望将标记改为：

<span class="h1">Color <span class="chosen-color">green</span></span>
<div class="swatchesContainer">
    <img title="green">
    <img title="blue">
</div>

绿色

并覆盖所选颜色的内容，而不是获取/匹配/替换
.h1
中的整个文本。您的jQuery代码将减少到一行。
另一种方法是：


var span=$（'.h1'）；
$（'.swatchescocontainer img'）。在（'click'，function（）上{
var txtArr=span.text（）.split（“”）；
txtArr[1]=this.title；
span.text（txtArr.join（“”））；
});            

绿色

<span class="h1">Color <span class="chosen-color">green</span></span>
<div class="swatchesContainer">
    <img title="green">
    <img title="blue">
</div>