Question

所以这是我的问题：

我有两行带有图像和确认按钮

我想要的是，当我单击该按钮时，另一个按钮的行为不像被单击的那个。

when i click （我也不想同时加载两者）

它如何结束

我想要什么

查看：

<a id="executarJob1" href="#">
    <img class="jobexecutadoimg1" src="{{ URL::to('/icons/donetarefa.png') }}">
    <img class="jobexecutadogif1" width="25" height="18" src="{{ URL::to('/icons/loading.gif') }}">
</a>
<img class="jobexecutadoimg2" src="{{ URL::to('/icons/donetarefacomplete.png') }}">

<a id="executarJob2" href="#">
    <img class="jobexecutadoimg1" src="{{ URL::to('/icons/donetarefa.png') }}">
    <img class="jobexecutadogif1" width="25" height="18" src="{{ URL::to('/icons/loading.gif') }}">
</a>
<img class="jobexecutadoimg2" src="{{ URL::to('/icons/donetarefacomplete.png') }}">

我的Ajax代码：

$(document).ready(function () {

    $(".jobexecutadoimg2").hide();
    $(".jobexecutadogif1").hide();

    $("#executarJob1").on('click', function () {
        $.ajax('{{route("executar",$lnd->id_demanda)}}',
            {
                beforeSend: function (carregando) {
                    $('.jobexecutadoimg1').html(carregando).hide();
                    $('.jobexecutadogif1').html(carregando).show();
                },
                success: function (finalizado) {
                    $('.jobexecutadoimg2').html(finalizado).slideDown('slow').show()
                    $('.jobexecutadoimg1').html(finalizado).hide();
                    $('.jobexecutadogif1').html(finalizado).hide();
                }
            });
    });
});

让您知道正在处理哪个图像的图像名称

jobexecutadoimg1 =蓝色按钮
jobexecutadoimg2 =绿色按钮（完成）
jobexecutadogif1 = Gif按钮（正在加载）

我如何在ajax中使用$ this？谢谢。

Answer 1

$("#executarJob1").on('click', function () {
    //you can declare it here
    var _this = this;
    $.ajax('{{route("executar",$lnd->id_demanda)}}',
        {
            beforeSend: function (carregando) {
                //you can use it here like _this
                console.log(_this);
                $('.jobexecutadoimg1').html(carregando).hide();
                $('.jobexecutadogif1').html(carregando).show();
            },
            success: function (finalizado) {
                $('.jobexecutadoimg2').html(finalizado).slideDown('slow').show()
                $('.jobexecutadoimg1').html(finalizado).hide();
                $('.jobexecutadogif1').html(finalizado).hide();
            }
        });
});

Answer 2

我认为您无需使用this即可使其正常工作

尝试：

$(document).ready(function () {

$(".jobexecutadoimg2").hide();
$(".jobexecutadogif1").hide();

function flipImgs(id)
{

    $.ajax('{{route("executar",$lnd->id_demanda)}}',
        {
            beforeSend: function (carregando) {
                $(id +' .jobexecutadoimg1').html(carregando).hide();
                $(id +' .jobexecutadogif1').html(carregando).show();
            },
            success: function (finalizado) {
                $(id +' .jobexecutadoimg2').html(finalizado).slideDown('slow').show()
                $(id +' .jobexecutadoimg1').html(finalizado).hide();
                $(id +' .jobexecutadogif1').html(finalizado).hide();
            }
        });
}
//you can create a loop for the folowing code
$("#executarJob1").on('click', flipImgs("#executarJob1") );
$("#executarJob2").on('click', flipImgs("#executarJob2") );
}

我如何在ajax函数中使用$ this？

2 个答案: