jquery toggleClass 在 img 元素上不起作用

jquery toggleClass not working on img element

本文关键字：不起作用 元素 img toggleClass jquery      更新时间：2023-09-26

我有两个按钮("批准"，"取消批准"(和一个加载微调器的图像。 默认情况下，将显示"批准"按钮，并隐藏"取消批准"按钮和加载微调图像。

单击"批准"按钮时，我希望它消失，显示加载微调器，然后执行 ajax 请求。 请求完成后，我希望再次隐藏加载微调器图像。 如果 ajax 请求成功，我希望显示"取消批准"按钮。 如果 ajax 请求失败，我希望"批准"按钮再次显示。

我遇到的问题是，在完成 ajax 请求后，我的 .always(( 方法运行，但微调器图像没有被隐藏。 下面是一个示例：

https://jsfiddle.net/ebme6fjs/7/

如果我更改 ajax 请求的 url 以给我一个 404 未找到错误，这个过程就像它应该的那样工作：

https://jsfiddle.net/ebme6fjs/8/

有谁知道为什么在我的第一种情况下 spinner.toggleClass("hide"); 命令没有在 always(( 函数中运行？ 谢谢。

更新：我发现的一件有趣的事情是，如果我在 .always(( 函数中重新定义我的微调变量，它会在成功的 ajax 请求上正常工作：

https://jsfiddle.net/ebme6fjs/9/

但是，如果您修改 ajax url 以接收 404，则微调器不消失的相同问题再次发生。

在始终要添加类的上下文中，请使用 addClass ，而不是toggleClass 。在您的代码中，该类切换了两次：一次在"总是"中，然后再次在"失败"中切换。所以它最终处于与以前相同的状态。

您

两次定位图像的原因是因为您像这样定义 otherButton：

var otherButton = currentButton.siblings();

当你想做的是这个：

var otherButton = currentButton.siblings('button');

当您可能希望根据某些条件添加或删除类时，toggleClass最有用。

在你的代码中，你在图像上切换了两次hide类，在回调和always()回调和done()/fail()回调中。

这是因为您在两个变量中都定位了图像，spinner & otherbutton 。

应按如下方式定义otherbutton：

var otherButton = currentButton.siblings("button");

不包括匹配集中的图像。

作为旁注，为了代码可读性，您应该按照 KWeiss 答案和顺便说一句中所述使用 addClass()/removeClass()，仅在回调中设置显示/取消显示元素的所有逻辑always()。

相关文章：