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');
            });
        });
    });

});