jquery 大神帮帮我 谢谢

Question

<td id="status">
                <if condition="$v['status'] eq 1" >
                    <a class="btn btn-success btn-xs" onclick="change_status(0,<{$v['user_id']}>)" href="javascript:;"><i class="fa fa-file-text fa-lg"></i> 开启</a>
                    <else />
                    <a class="btn btn-warning btn-xs" onclick="change_status(1,<{$v['user_id']}>)" href="javascript:;"><i class="fa fa-file-text fa-lg"></i> 禁用</a>
                </if>
</td>
<script>
function change_status(status,ids){
       
       
       /* $.post("__MODULE__/User/change_status", 
          { id: ids, sta: status },
            function(msg){
              alert(msg);
              
            } 
        );*/
   }

</script>

怎么做到 点击 一列开启按钮 获得当前点击列的对象 然后 把 开启两字变成 禁用尼 谢谢

Answer 1

想要按原有HTML结构，快速修改js来实现你要的效果的话，多传个this就能获取当前按钮来做后续操作了，把各个onclick()改成：

onclick="change_status(this, 状态码, <{$v['user_id']}>)"

然后js这样写：

function change_status(e, status, ids){

    $.post("__MODULE__/User/change_status", 
        { id: ids, sta: status },
        function(msg){
            if (msg) { // 不知道你msg返回什么，这里当作后台成功msg的值是true
                var btn = $(e); // 当前按钮
                if (btn.hasClass('btn-sucess')) { // 要由“启用”变成“禁用” , 判断条件用状态吗status === 0也行，
                    btn.html('<i class="fa fa-file-text fa-lg"></i> 禁用'); // 改变按钮文字
                    btn.removeClass('btn-success').addClass('btn-warning'); // 改变按钮颜色
                } else { // 由“禁用”变“启用”
                    // 同理
                }
            }
        } 
    );
}

哈哈哈，不过这样做代码不够优雅，还可以优化HTML让JS更好工作，不过这是另外的谈论点了。
现在功能是可以正常工作的哈。
希望对你有帮助。

Answer 2

this就指向当前元素

Answer 3

// html 里文字加个外包txt 便于查找
<td id="status">
  <if condition="$v['status'] eq 1" >
    <a class="btn btn-success btn-xs" onclick="change_status(0,<{$v['user_id']}>)" href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span class="txt">开启</span></a>
  <else />
    <a class="btn btn-warning btn-xs" onclick="change_status(1,<{$v['user_id']}>)" href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span class="txt">禁用</span></a>
  </if>
</td>
  
// 点击事件
$(document).on('click', '.btn-success', function () {
  // 点击开启时，class变为btn-warning， 文字改变
  $(this).addClass("btn-warning").removeClass("btn-success").find(".txt").html("禁用");
}).on('click', '.btn-warning', function () {
  // 点击禁用时，class变为btn-success， 文字改变
  $(this).addClass("btn-success").removeClass("btn-warning").find(".txt").html("开启");
});

Answer 4

多传入一个参数就好
onclick="change_status(0,<{$v['user_id']}>, this)"

function change_status(status,ids,button){...}