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

Question

所以我有这段代码：

    $(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>

所以我想要的是我想要永久更改“X”的img src的按钮。

-我正在使用 Flask。 -单击按钮时，它将数据库中的“状态”列从“未付费”更新为“已付费”。因此按钮类从“未付费”更改为“已付费”。但我不知道如何更改 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").each(function(){
                  if($(this).hasClass("paid")){
                    $(this).attr("src", "/static/check.png");
                   }
                });
            });

还有 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>

Answer 1

基于我们在 cmets 中的讨论。答案由以下两个 cmets 驱动：

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

和

在 mysql 中，我有一列“状态”，默认情况下插入“未付费” 记录。单击按钮后，该记录将更新为“付费”。

所以基本上您的记录正在更新，并且当您更新记录以支付您更新图像源时，您不会在根据按钮状态呈现 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>

然后在document.ready

$(document).ready(function() {
    //...
    //Your updated/working code, that you have mentioned in the question
    //...

    //Add the following:
    $("img").each(function(){
           console.log($(this).attr("class");
           if($(this).hasClass("paid")){
                  $(this).attr("src", "/static/check.png");
           }
    });

});

---

更新

---

你可以做一个 hack。

将图像重命名为 paid.png 和 unpaid.png

然后将您的代码更改为：

src="/static/{{status}}.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>

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