javascript - 单击按钮时如何更改特定的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

基于我们在评论中的讨论。答案是由您的以下两条评论驱动的:

...is just that the img change is not permanent,after refresh it goes back to normal....

和

In mysql I have a column 'status' wich by default inserts 'unpaid' record. After you click the button, that record updates to 'paid'.

所以基本上你的记录正在更新，当你更新记录以支付时，你会更新图像源，但在根据按钮状态渲染 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");
           }
    });

});

<小时/>

更新

<小时/>

你可以做一次黑客攻击。

将图像重命名为 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>

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