时间戳

首页 > 解决方案 > Ajax Javascript 不会在不刷新页面的情况下更改我的 CSS

javascript - Ajax Javascript 不会在不刷新页面的情况下更改我的 CSS

问题描述

我正在使用 JavaScript 代码更改我的 CSS 样式，但是当我的搜索过滤器找到该元素时它不起作用；在我刷新页面之前，样式效果不会改变。这是我的代码，当我刷新页面时它工作得很好，但如果不重新加载页面就不能动态工作。

jQuery(function($) {
  $( ".card-auto-label:contains('Ny')" ).css( "background", "#5dd018" );
  $( ".card-auto-label:contains('Solgt')" ).css( "background", "red" );
  $( ".card__label:contains('Ny')" ).css( "background", "#5dd018" , "!important");
});

标签： javascriptjquery

解决方案

您的代码只运行一次，它不会将 CSS 全局添加到页面中，而是将其添加到页面上已经存在的指定元素中。

与使用<style>标签或 css 文件不同，使用 jQuery css() 函数应用样式会将它们添加到您作为内联 css 定位的特定元素上。

例如，$(".someclass").css("mystyles")

结果如下所示：<div class="someclass" style="mystyle"></div>

这与页面中的全局 CSS 样式不同，如下所示：

.someclass{ mystyle }

在第一个示例中，您的样式仅应用于您使用 jQuery 分配给它的元素。如果您向页面添加具有完全相同的类和属性的另一个元素，它将不会继承该样式。页面中没有任何内容告诉它以这种方式设置样式。

在第二个示例中，样式全局应用于每个具有 class 的元素someclass。无论何时将元素添加到页面、加载或稍后动态创建，浏览器都会将其应用于它someclass在 DOM 中出现的任何实例。

由于您依赖 jQuery 函数来确定样式的放置位置，并且该函数不能单独使用 css 进行复制，所以我知道为什么第二个示例不适合您。因此，要解决此问题，您需要有一个在 AJAX 调用完成加载时触发的函数。我假设您已经在处理 AJAX 调用中的数据以将其添加到您的页面？在将内容添加到页面后，在该函数中添加 javascript 代码，它们将使用样式进行更新。你现在写它的方式，它只是在页面加载时触发一次。

推荐阅读