javascript - 当 multipule 运行时，将加载图标附加到 Table TD 以进行 ajax 调用会混淆

Question

我在表中有一个单击事件以获取更多数据(向下钻取报告) 我试图在该行上显示一个加载图标，直到检索到数据。当我在第一行完成之前单击第二行时，它只会删除第二个加载图标。第一个图标将保留在那里，直到我点击它两次。

点击事件

self.t01_click = function (e, event) {

        trig = $(event.currentTarget);
        console.log(trig);
        if (trig.is('.expanded')) {
            e.details.removeAll();
            trig.removeClass('expanded');
        } else {
            trig.addClass('cellLoading');
            xhr_get(publish + "odata/pp_Result?id=uid&$filter=GroupingLevel eq '02_Programs' and OfferedGrp eq '"+e.OfferedGrp+"' ").done(function (allData) {
                e.details([]);
                var mappedLogs = $.map(allData.d.results, function (item) { return new rpt(item) });
                e.details(mappedLogs);

                trig.addClass('expanded');
                trig.removeClass('cellLoading');

            }).fail(function (data) {
                console.log('fail');
                trig.removeClass('cellLoading');
            });


        }
    }

ajax函数

function xhr_get(url, datap) {
        //  console.log(url);
        return $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
            data: datap,
            async:true,
            headers: { "Accept": "application/json;odata=verbose" },
        })
    }

Answer 1

你能在本地声明trig吗？或者有什么理由让它成为一个全局变量？

如果您在本地声明它，每个回调将引用正确的 trig 实例:

self.t01_click = function (e, event) {

    //Declare trig locally:
    var trig = $(event.currentTarget);
    console.log(trig);
    if (trig.is('.expanded')) {
        e.details.removeAll();
        trig.removeClass('expanded');
    } else {
        trig.addClass('cellLoading');
        xhr_get(publish + "odata/pp_Result?id=uid&$filter=GroupingLevel eq '02_Programs' and OfferedGrp eq '"+e.OfferedGrp+"' ").done(function (allData) {
            e.details([]);
            var mappedLogs = $.map(allData.d.results, function (item) { return new rpt(item) });
            e.details(mappedLogs);

            trig.addClass('expanded');
            trig.removeClass('cellLoading');

        }).fail(function (data) {
            console.log('fail');
            trig.removeClass('cellLoading');
        });


    }
}

下面是这个想法的演示:

$("button").click( function() {
    var $this = $(this);
    var $span = $this.prev();
    
    $span.text("...loading...");
    $span.attr("class","loading");
    $this.hide();
    
    window.setTimeout( function() {
        $span.attr("class","loaded");
        $span.text("Lorem ipsum dolor sit amet...");
    }, 3000);
});

.nodata {
    color: silver;
}

.loading {
    color: red;
}

.loaded {
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="nodata">...</span><button>Load Data</button><br />
<span class="nodata">...</span><button>Load Data</button><br />
<span class="nodata">...</span><button>Load Data</button><br />
<span class="nodata">...</span><button>Load Data</button><br />
<span class="nodata">...</span><button>Load Data</button><br />
<span class="nodata">...</span><button>Load Data</button><br />
<span class="nodata">...</span><button>Load Data</button><br />
<span class="nodata">...</span><button>Load Data</button><br />

变量 $span 在 onclick 函数中声明。执行函数时，$span 的实例可用于 window.setTimeout 回调函数。