0

I have the following code (using XSLT/HTML)

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

The "ClassName" is being through dynamically through a CMS, which when there are two options selected, they are segregated by a bunch of other characters. As a result you end up with something similar to this:

;#class1;#class2;#

What I'm trying to do is modify the class names based on what they are currently set to. I written the following code, which when entered into the browsers console window, works an absolute charm. However, when added to the actual page, it doesn't take effect. I'm wondering if it's a priority thing or something else:

$('.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 );}    
});

Any help on this would be greatly appreciated.

Thanks in advance :)

4

2 回答 2

0

为了在页面加载时触发功能，您需要将其包装在准备好的 DOM 中。

这是一个为 jquery 准备的 DOM教程。

$(document).ready(function() {
    // Code to be executed on page load.
});
于 2013-07-17T12:45:29.083 回答
0

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 );
    }    
});

小提琴示例

于 2013-07-17T12:51:27.933 回答