slideUp 和 slideDown jQuery

Posted 2023-05-08

【中文标题】slideUp 和 slideDown jQuery

【英文标题】：slideUp and slideDown jQuery

【发布时间】：2017-03-17 04:36:39

【问题描述】：

我有一个表，我可以在其中单击类 .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>

【问题讨论】：

代码看起来不错。您确定您的页面中还有其他 js 错误吗？检查您的浏览器控制台

控制台没有错误，这段代码是我脚本中唯一的。

你是说上滑连不上？

好吧，使用我发布的第二段代码时，什么都没有发生。当我有第一段代码时它就起作用了..

刚刚将您的代码复制并粘贴到本地页面，对我来说效果很好

【参考方案1】：

我在您的代码中看到的一个问题是，您正在使用$(this).data('url') 将 url 数据属性值设置为被点击的 tr。但$(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');
            );
        );
    );

);

【讨论】：

谢谢。我以为会是这样的。可以通过以任何方式使用“父母”来完成吗？但是我确实认为这是最干净的解决方案

您可以使用 parent 方法，但如果您在代码之间引入另一个 DOM 元素，代码将会中断。所以我认为读取和存储到局部变量是一个好主意。或者您可以在调用 slideUp 之前从 $(this) 读取 url 和 id 值，存储在本地变量中并使用它。