Jquery附加了两个具有不同类的html页面

Jquery append two html pages with different classes

本文关键字：同类 页面 html 两个 Jquery      更新时间：2024-02-07

嗨，我对jquery的.append（）和.html（）函数感到困惑。

我有AJAX成功的内部：

success: function(response){
$('#imodal').html('Success!').addClass("flash-success").fadeIn();
$('#imodal').append(response);
}

这将基本上在绿色背景中显示一种flash消息，类为"flash success"，以及来自JSON编码的响应，其中包含关于刚刚发生的事务的必要信息。

我的问题是，类"flash success"也出现在附加的响应中如何使这两个类不同？我试过这个：

$('#imodal').html('Success!').addClass("flash-success").fadeIn();
$('#imodal').append(response).removeClass("flash-success");

但没有运气。附加的响应仍然是绿色的，可能具有"flash success"类。。谢谢你的帮助！

jQueryappend（）将在容器末尾插入内容/元素，out将替换其内容。http://api.jquery.com/append/

其中，jQueryhtml（）将使用给定数据和html格式覆盖容器内的内容http://api.jquery.com/html/

My problem is, the class "flash-success" is also present in the appended response

因为您正在将类添加到附加本身html('Success!').addClass("flash-success")

尝试：

$('#imodal').append(response); // Append the child to element
$('#imodal').addClass("flash-success"); // add class to container

jQuery.append（）方法将把内容添加到元素的末尾。在您的情况下，"response"将添加到ID为"imodal"的DOM元素中。

如果希望在闪烁类之后添加，则应将"response"附加到位于闪烁类之后的另一个DOM元素。

$('#imodal').append(response).removeClass("flash-success");这不会从附加的响应中删除类，而是在#imodal元素中查找不存在的类。如果您的响应是html代码，那么您应该执行以下操作：$(response).removeClass("flash-success");

只需在附加响应后添加类"flash success"即可

$("#imodal").append(response)
$("#imodal").addClass("flash-success")

您可以得到您想要的结果----

相关文章：