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

Question

所以这是我的问题:

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

我想要的是当我点击那个按钮时，另一个按钮的行为与被点击的按钮不同。

(我也不希望它们都发生加载)

结局如何

我想要什么

查看:

<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

我不认为你需要使用 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") );
}