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>

所以我想要的是我想要＆＃34; X＆＃34;的img src的按钮。永久改变。

-I＆＃39; m使用Flask。 - 单击按钮时，它会更新列＆＃34; status＆＃34;来自＆＃34;未支付＆＃34;的数据库to＆＃34;付费＆＃34;。因此按钮类从＆＃34;未支付＆＃34;到了付费。但我无法弄明白如何在此之后改变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

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

...只是img更改不是永久性的，刷新之后恢复正常....

和

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

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

我知道这不是一个合适的解决办法，但能帮助你度过难关。

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

1 个答案:

更新