javascript - 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') 来获取设置为单击的 tr 的 url 数据属性值。但 $(this) 实际上是那里的 $('#details') 因为您是在 $('#details')< 的 SlideUp 中访问它，没有 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');
            });
        });
    });

});