slideUp和slideDown jQuery

Question

我有一個表，可以在其中單擊類.details的行（）。 這將顯示一個id="details"的div，其中包含有關該行中元素的額外信息。

我有以下代碼。

$('.details').click(function () {
    $('#details').slideUp('slow');
    $('#details').load($(this).data('url'), { id: $(this).data('id') }, function () {
        $(this).slideDown('slow');
    });
});

不過，我想加載（ .load()后發生.slideUp()由於負載而元素向上滑動（這看起來奇怪的）開始的事實。 我試圖通過以下方式將其添加為回調函數：

$('#details').slideUp('slow', function () {
    $('#details').load($(this).data('url'), { id: $(this).data('id') }, function () {
        $(this).slideDown('slow');
    });
});

但是，這會使代碼無法正常工作。 有誰知道如何解決這個問題？

謝謝。

編輯：

我的表格行如下所示：

<tr class="details" data-id="@item.VehicleID" data-url="@Url.Action("Details", "Vehicle")">
</tr>

我的div如下所示：

<div id="details"></div>

Answer 1

我在您的代碼中看到的一個問題是，您正在使用$(this).data('url')將url數據屬性值設置為被單擊的tr。 但是$(this)實際上是$('#details')因為你訪問它的效果基本show里面$('#details')不具有URL數據屬性。 所以你一定會出錯

解決方案是將$(this ）（單擊的行）分配給局部變量，然后在其他回調函數中使用它。

這應該工作。

$(function () {


    $('.details').click(function () {
        var _this = $(this);

        $('#details').slideUp('slow', function () {
            $('#details').load(_this.data('url'), { id: _this.data('id') }, function () {
                $('#details').slideDown('slow');
            });
        });
    });

});