使用jQuery修改CSS类的名称-在加载时不起作用

Using jQuery to modify the name of a CSS class - Not working on load

本文关键字：加载 不起作用 修改 jQuery CSS 使用      更新时间：2023-09-26

我有以下代码（使用XSLT/HTML）

<div class="{@ClassName} modify""><img src="{substring-before(@Image, ', ')}"/></div>

"ClassName"是通过CMS动态通过的，当选择了两个选项时，它们会被一堆其他字符分隔开。结果你会得到类似的东西：

;#class1;#class2;#

我想做的是根据类名当前的设置来修改它们。我编写了以下代码，当输入浏览器控制台窗口时，它的工作非常有魅力。但是，当添加到实际页面时，它不会生效。我想知道这是优先事项还是其他事项：

$('.modify').each(function(){
var newPrimeItem= "primary item";
var newItem = "item";
if ( $(this).attr('class') == ";#primary;#item;# modify") { $(this).attr('class', newPrimeItem);}
if ( $(this).attr('class') == ";#item;# modify") { $(this).attr('class', newItem );}    
});

如有任何帮助，我们将不胜感激。

提前感谢：）

为了在页面加载时触发函数，您需要将其封装在DOM中。

这里有一个关于为jquery准备DOM的教程。

$(document).ready(function() {
    // Code to be executed on page load.
});

html中的类名包含特殊字符，这就是jquery找不到选择器的原因。来源jquery网站。

若要将任何元字符（如！"#$%&'（）*+，./：；<=>？@[]^`｛|｝~）用作名称的文字部分，必须用两个反斜杠转义：''。例如，具有id="foo.bar"，可以使用选择器$（"#foo''.bar"）

$('.modify').each(function(){
    var newPrimeItem= "primary item";
    var newItem = "item";
    var me = $(this);
    //remember that classes are separated with space
    if (me.hasClass("'';''#primary'';''#item'';''#") && me.hasClass("modify"))
    { 
        me.attr('class', newPrimeItem);
    }
    if ( me.hasClass("'';''#item'';''#")  && me.hasClass("modify") ) 
    { 
        me.attr('class', newItem );
    }    
});

FIDDLE示例

相关文章：