Javascript 单击按钮时如何更改特定的img src？

我有一段代码：

    $(document).ready(function(){
        $("button.check").on("click", function(event) {
            var serv_id = event.currentTarget.id;
            $.post("/check", {serv_id: serv_id }).done(function(result3){
                $("button#"+serv_id).hasClass("paid")
                $("img#img"+serv_id).attr("src", "/static/check.png");
                $("img.this_img").each(function(){
                    if($(this).hasClass("paid")){
                        $(this).attr("src", "/static/check.png");
                        }
                 });
                });
               });
              });

下面是HTML：

<td>
    <img id="{{ status }}" class="this_img {{ sid }}" src="/static/notcheck.png" width="21">
    &nbsp;
    <button id="{{ sid }}" type="button" class="{{ status }} check btn btn-primary btn-xs">Paid</button>
</td>

和HTML：

        <td>
           <img id="img{{ sid }}" class="this_img {{ status }}"  src="/static/notcheck.png" width="21">
           &nbsp;
           <button id="{{ sid }}" type="button" class="{{ status }} check  btn btn-primary btn-xs">
           Paid
           </button>
        </td>

支付

基于我们在评论中的讨论。答案取决于您的以下两条评论：

…只是img更改不是永久性的，在刷新后它会消失 恢复正常

及

在mysql中，我有一个列“status”，默认情况下会插入“unpaid” 记录。单击按钮后，该记录将更新为“已付款”

因此，基本上，您的记录会得到更新，并且当您更新记录以更新图像源时，也会更新图像源，但是在基于按钮状态呈现html时，您不会更新图像源。您总是将未付款的图像源

这样做：

将

status

类也添加到图像中

<td>
    <img id="img{{ sid }}" class="this_img {{ status }}" src="/static/notcheck.png" width="21">
    &nbsp;
    <button id="{{ sid }}" type="button" class="{{ status }} check btn btn-primary btn-xs">
         Paid
    </button>
</td>

---

更新

---

你可以做一个黑客

将图像重命名为

paid.png

和

unpaid.png

 <td>
     <img id="img{{ sid }}" class="this_img {{ status }}"  src="/static/{{status}}.png" width="21">
       &nbsp;
       <button id="{{ sid }}" type="button" class="{{ status }} check  btn btn-primary btn-xs">
       Paid
       </button>
    </td>

然后将代码更改为：

src=“/static/{{{status}}.png”

支付

---

我知道这不是一个合适的解决方案，但可以帮助您度过难关。

基于我们在评论中的讨论。答案取决于您的以下两条评论：

…只是img更改不是永久性的，在刷新后它会消失 恢复正常

及

在mysql中，我有一个列“status”，默认情况下会插入“unpaid” 记录。单击按钮后，该记录将更新为“已付款”

因此，基本上，您的记录会得到更新，并且当您更新记录以更新图像源时，也会更新图像源，但是在基于按钮状态呈现html时，您不会更新图像源。您总是将未付款的图像源

这样做：

将

status

类也添加到图像中

<td>
    <img id="img{{ sid }}" class="this_img {{ status }}" src="/static/notcheck.png" width="21">
    &nbsp;
    <button id="{{ sid }}" type="button" class="{{ status }} check btn btn-primary btn-xs">
         Paid
    </button>
</td>

---

更新

---

你可以做一个黑客

将图像重命名为

paid.png

和

unpaid.png

 <td>
     <img id="img{{ sid }}" class="this_img {{ status }}"  src="/static/{{status}}.png" width="21">
       &nbsp;
       <button id="{{ sid }}" type="button" class="{{ status }} check  btn btn-primary btn-xs">
       Paid
       </button>
    </td>

然后将代码更改为：

src=“/static/{{{status}}.png”

支付

---

---

我知道这不是一个合适的解决方案，但可以让你通过。

你确定js中的

serv\u id

与html中的

{status}}

相同吗？是的，我可以在这里打印。serv\u id与{{status}无关，serv\u id是数据库中的id，在这里打印为{{sid}你给你的图像这个id:

img id=”{{status}}“

您通过这个id选择：

serv_id

。因此，如果它们不同，您的img元素将不会被这个id选择：

$（

。也许您应该有这样的内容：img id=“{sid}”您确定js中的

serv_id

与

{status}相同吗

在你的html中？是的，我可以在这里打印。serv_id与{{{status}无关，serv_id是来自数据库的id，在这里打印为{{sid}。你给你的图像这个id:

img id=“{{status}}”

您通过这个id进行选择：

serv\u id

。因此，如果它们不同，您的img元素将不会被这个id选择：

$（“img#“+serv\u id）

。也许您应该有这样的内容：img id=“{sid}”，刷新后图像仍然返回到“notcck.png”，也许我需要做一个jinja if语句，我不知道我尝试了不同的方法，没有任何效果。当你刷新图像时，图像是否有

付费的
类？是的，它有，因为更改以db为单位，类是jinja中的对象。你必须编写一个if case，如果该类付费，则图像的src应该选中，否则在渲染时取消选中我只知道html，但问题是我不知道怎么做。因为我用不同的变体尝试了一些东西，但没有任何效果。刷新后图像仍然返回到“notcck.png”，也许我需要做一个jinja if语句，我不知道我尝试了不同的方法，没有任何效果。当你刷新图像时，图像是否有
付费的
类？是的，它有，因为更改以db为单位，类是jinja中的对象。你必须编写一个if case，如果该类付费，则图像的src应该选中，否则在渲染时取消选中我只知道html，但问题是我不知道怎么做。因为我用不同的变体尝试了一些东西，但没有任何效果。