Question

我有以下结构：

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

现在我想将跨度中的颜色更改为图像title中所述的颜色。（不，我无法添加带有颜色名称的类）

我试过以下代码：

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

我从te图像中提取所有title属性并将其替换为同一foreach函数中的te文本

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

JSFiddle

Answer 1

你的逻辑存在缺陷。在循环内部，您将反复覆盖string变量：

string = product_name.replace(...)

在循环结束时，您将拥有"Color green".replace("blue", " ") - ＆gt; "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代码将减少到一行。

Answer 2

另一种方法是：

var span = $('.h1');
$('.swatchesContainer img').on('click', function() {
    var txtArr = span.text().split(' ');
    txtArr[1] = this.title;
    span.text( txtArr.join(' ') );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="h1">Color green</span>
<div class="swatchesContainer">
    <img title="green" src="/"/>
    <img title="blue" src="/"/>
</div>

Javascript字符串替换无效

2 个答案: