在这种特殊情况下 indexOf 匹配变量答案

【问题标题】：indexOf match variable in this particular case在这种特殊情况下 indexOf 匹配变量
【发布时间】：2012-01-03 22:10:02
【问题描述】：

我想检查mydiv 是否有class，如果没有，请在var @ 中添加任何内容987654322@。我正在尝试这样做，但它不起作用：

var newClass="classToBeAdded";

if(document.getElementById("mydiv").className.indexOf(/(?:^| )(newClass)(?:$| )/)==-1){
    document.getElementById("mydiv").className+=" "+newClass;
}

【问题讨论】：

标签： javascript html class indexof

【解决方案1】：

使用这个：

var newClass = "classToBeAdded";
var d = document.getElementById("mydiv");
var r = new RegExp(" " + newClass + " ");
if (r.test(" " + d.className + " "))
    // do something here

或者，类似地：

var d = document.getElementById("mydiv");
if ((" " + d.className + " ").indexOf(" " + newClass + " ") != -1)
    // do something here

在className 字符串前后添加空格，这样无论目标类出现在字符串中的什么位置，我们都将匹配它。

一些测试

假设如下函数：

function hasClass(str, name) {
    return (" " + str + " ").indexOf(" " + name + " ") != -1;
}

测试：

hasClass("target", "target") // true
hasClass("test target test1", "target") // true
hasClass("test1 target", "target") // true
hasClass("target test1", "target") // true
hasClass("test1", "target") // false

【讨论】：

" " + newClass + " " 会检查第一节/最后一节课吗？
@TuxedoKnightChess - 是的。试试看。
"(^| )+" + newClass + "($| )+" 会做一个伎俩（没有尝试但假设它会）
@TuxedoKnightChess - 添加了一些测试来演示。

【解决方案2】：

你可以使用dom元素的javascript属性

document.getElementById("mydiv").classList

它返回分配的类名数组

【讨论】：

旧版浏览器不支持developer.mozilla.org/en/DOM/…
+1 我不知道 classList，但它需要更新的浏览器 (developer.mozilla.org/en/DOM/element.classList)。
是的，但总有办法扩展任何类型的原型来添加属性；）但你应该使用 jQuery 或任何类似的东西来让你的生活更轻松

【解决方案3】：

您可能应该使用一个库来为您抽象出这些问题。

经验法则是您应该专注于特定领域的问题，而不是重新发明轮子。

jQuery .hassClass 是一个不错的候选

【讨论】：