jQuery if/else 语句匹配通配符 CSS 名称答案

【问题标题】：JQuery if/else statement matching a wildcard CSS namejQuery if/else 语句匹配通配符 CSS 名称
【发布时间】：2011-01-17 16:51:31
【问题描述】：

我正在尝试在 JQuery 中编写一个 if/else 语句，它可以通过匹配“IN”或“OUT”（在本例中）来更改元素的类。

例如，我有几个<DIV> 和class='IN-something' 或class='OUT-something'。

如果我知道确切的 CSS 类，以下内容会起作用，但我只知道它包含“IN”或“OUT”。

所以是这样的：

if ($(jRow).hasClass('IN-*'))
{jRow.attr( "class", "OUT-foo" );}
else  
{jRow.attr( "class", "IN-foo");}

想法？谢谢！

【问题讨论】：

【解决方案1】：

if ($(jRow).attr('class').indexOf('IN-') !== 1)
  {jRow.attr( "class", "OUT-foo" );}
else  
  {jRow.attr( "class", "IN-foo");}

【讨论】：

【解决方案2】：

你可以使用attribute-contains-prefix-selector^(docs)，如果那将是整个类的值（或者至少那是第一类）。

if ($(jRow).is('[class |= IN]')) {

这也使用is()^(docs) 方法来查看jRow 是否匹配。

编辑：

如果您的意思是您不知道foo 是什么，并且您需要保留它，那么我会这样做：

jRow.attr('class', function(i,cls) {
    return cls.indexOf('IN') > -1 ? cls.replace('IN','OUT') : cls.replace('OUT','IN');
});

您可以将函数作为第二个参数传递给attr()^(docs) 方法。该函数有 2 个参数。第一个是迭代中的当前索引。第二个是属性的当前值。

返回值是要设置的值。

【讨论】：

【解决方案3】：

使用 jQuery 数据来存储“IN”或“OUT”，或者添加一个您自己的属性，其名称为“IN”或“OUT”。这里真正的问题是组合类名。

您还可以拆分 IN 和 OUT 并使用多个类。

<tr class = "IN foo"/>

if( $obj.hasClass("in") ){ $obj.removeClass("in").addClass("out") }

【讨论】：

【解决方案4】：

var class = $(jRow).attr('class');
if (class.search("IN\-.*")) {
    jRow.attr( "class", "OUT-foo" );
}
else {
    jRow.attr( "class", "IN-foo");
}

【讨论】：

真的吗？两票反对，只是为了准确回答那家伙的实际问题？
好的，如果你投了反对票，请考虑以下几点： 1. the difference between search and indexOf-> indexOf 在这里更合适，因为我们在这里不需要正则表达式。 2. 搜索返回 -1 on not found 并且 -1 转换为 boolean 为真，所以你的答案永远不会奏效。 3. 正则表达式中的连字符不需要转义，因为在字符类之外它们没有特殊含义。有 3 个缺陷和更好的答案，你最好删除你的答案。