Javascript 如何在ajax代码中将相似和不相似的文本更改为svg或iframe核心？

我试图更改用户单击svg心脏填充时显示的相似和不相似文本。我所期望的是，在ajax代码中，心脏会改变颜色，而不是改变为类似和不同的文本。我曾尝试将

.text

更改为

.html

，但没有效果，我的ajax知识不强。 代码如下：

HTML:

---

把颜色换成这样怎么样

success: function(response){
    let button = $(`.like-btn${post_id}`)
    if(trim === 'Unlike'){
        button.html(button.html().replace("red", "gray"));
        res = trimCount - 1
    }
    else {
        button.html(button.html().replace("gray", "red"));
        res = trimCount + 1
    }
    $(`.like-count${post_id}`).text(res)
},

---

button.html（）

是innerHtml的getter/setter。因此，代码将检索svg代码，替换颜色名称，并将更改后的svg代码写回按钮。

像这样替换颜色如何

success: function(response){
    let button = $(`.like-btn${post_id}`)
    if(trim === 'Unlike'){
        button.html(button.html().replace("red", "gray"));
        res = trimCount - 1
    }
    else {
        button.html(button.html().replace("gray", "red"));
        res = trimCount + 1
    }
    $(`.like-count${post_id}`).text(res)
},

---

button.html（）

是innerHtml的getter/setter。因此，代码将检索svg代码，替换颜色名称，并将更改后的svg代码写回按钮。

颜色效果正常，但添加和删除用户的逻辑会发生变化。当用户不断点击心脏svg时，它会不断增加喜欢的数量，而不是在用户点击时删除和添加。颜色效果很好，但添加和删除用户的逻辑会发生变化。当用户不断单击心脏svg时，它不断增加喜欢的数量，而不是在用户单击时删除和添加。

success: function(response){
    let button = $(`.like-btn${post_id}`)
    if(trim === 'Unlike'){
        button.html(button.html().replace("red", "gray"));
        res = trimCount - 1
    }
    else {
        button.html(button.html().replace("gray", "red"));
        res = trimCount + 1
    }
    $(`.like-count${post_id}`).text(res)
},