Javascript 字符串替换没有效果

Question

我有以下结构:

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

现在我想将范围中的颜色更改为图像的标题中指定的颜色。 (不，我无法添加带有颜色名称的类)

我尝试过以下代码:

var product_name = jQuery(".h1").text();
jQuery(".swatchesContainer img").click(function(){

    var selected_color = jQuery(this).attr('title');
    var string;
    console.log("String before: " + product_name);

    jQuery('.swatchesContainer img').each(function(){
        string = product_name.replace(jQuery(this).attr('title').trim(),' ');
        console.log(jQuery(this).attr('title'));
    })
    console.log("String after: " + string);
    jQuery(".h1").text(string + " " +selected_color);
});

我正在从图像中获取所有 title 属性，并在同一 foreach 函数中从文本中替换它们

但是新颜色不断附加在现有颜色之后

JSFiddle

Answer 1

你的逻辑有问题。在循环内，您重复覆盖 string 变量:

string = product_name.replace(...)

在循环结束时，您将得到 "Color green".replace("blue", "") -> "Color green"。

更改这些行:

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

致这些:

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

Updated Fiddle

<小时/>

话虽如此，我宁愿将标记更改为:

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

并覆盖.chosen-color的内容，而不是获取/匹配/替换.h1内的整个文本。您的 jQuery 代码将减少为一行。