Question

我有一个验证脚本可以验证两个不同的类。我想为一些生成数组onmouseover的选择框添加一个额外的类。问题是，选择框有两个类，一个用于验证，一个用于数组，我的脚本除非具有确切的名称，否则不会识别它。如果使用==它根本不起作用，但使用=它会尝试验证我页面上的所有元素，甚至是那些没有任何类的元素。

我想知道如何在不使用此脚本打破其余页面的情况下使其效率最高。

这是HTML的一个例子

<div class="select-styled">
    <select id="pm" name="pm" class="selValidate pmpop" onmouseover="pmpop();">
        <option value="Foo">Foo</option>
        <option value="">- Remove -</option>
    </select>
</div>

这是验证脚本

for (i=0; i<thisform.elements.length; i++) {
        if (thisform.elements[i].className = "selValidate" || thisform.elements[i].className == "req" || thisform.elements[i].className == "valfocus") {
//do stuff
    }
}

Answer 1

为什么不使用match()？

if (thisform.elements[i].className.match('selValidate')) {
    // do stuff
}

您无法在if中使用赋值运算符，因为它会执行此操作... assign 。 ==是比较运算符。但您似乎想要检查是否为具有多个..

的元素设置了一个css类

所以match()会更好地搜索字符串中字符串的出现，而不是比较两个字符串文字以查看它们是否相等。

此外，match()可以接受正则表达式，它可以很强大。：）

编辑：

Per Barney的评论，我建议使用正则表达式（如前所述）避免错误匹配，你可能有类似的类名（例如 selValidate 和 selValidateOff 或类似的东西）。

if (thisform.elements[i].className.match(/\bselValidate\b/)) {
    // now, really do stuff
}

两者都很好，真的。我只想看你想要搜索的范围有多窄。

Here is a nice cheat sheet用于开始使用JavaScript中的正则表达式。

Answer 2

问题是，对于多个类，className属性列出了每个以空格分隔的类。所以标记如：

<select id="pm" name="pm" class="selValidate pmpop" onmouseover="pmpop();">

className等于"selValidate pmpop"。

要使用JavaScript使用className查找单个类，您需要使用String .match方法来测试将在字符串中找到类的正则表达式，或者您需要打破该字符串为可搜索的标记。

.match的示例：

for (i = 0; i < thisform.elements.length; i += 1) {
    if (thisform.elements[i].className.match(/\bselValidate\b|\breq\b|\bvalfocus\b/g) { // relies on .match returning null for no match
        //do stuff
    }
}

将字符串分解为可搜索的标记的示例：

for (i = 0; i < thisform.elements.length; i += 1) {
    var allClasses = thisform.elements[i].className.split(' ');
    if (allClasses.indexOf('selValidate') > -1 || allClasses.indexOf('req') > -1 || allClasses.indexOf('valfocus') > -1) { // relies on ECMAScript 5 Array.indexOf support
        //do stuff
    }
}

// or

for (i = 0; i < thisform.elements.length; i += 1) {
    var allClasses = thisform.elements[i].className.split(' ');
    for (var j = 0; j < allClasses.length; j += 1) {
        if (allClasses[j] == 'selValidate' || allClasses[j] == 'req' || allClasses[j] == 'valfocus') { // should work with any browser that supports JavaScript
            //do stuff
        }
    }
}

您也可以使用.classList之类的内容，但我不知道what browsers you need to target。

.classList的示例：

for (i = 0; i < thisform.elements.length; i += 1) {
    if (thisform.elements[i].classList.contains('selValidate') || thisform.elements[i].classList.contains('req') || thisform.elements[i].classList.contains('valfocus')) { // relies on ECMAScript 5 Array.indexOf support
        //do stuff
    }
}

此外，只有在想要为左手操作员分配值时才使用=（这就是它的用途）。 ==是类型强制相等（或“等等”）测试，===是严格（非强制）相等测试。

Answer 3

这方面的DOM方法是classList。如果您只关心IE 10+，那么这是您最好的选择：

thisform.elements[ i ].classList.contains( 'selValidate' );

如果您需要支持旧浏览器，请使用RegExp和className：

thisform.elements[ i ].className.match( /\bselValidate\b/ );

编辑：after running a few tests on jsperf，似乎classList通常要快得多（唯一的浏览器不是IE11的情况）。出于这个原因 - 并且因为classList.contains是一个专门用于执行相关任务的API（而className.match是一个kludge） - 我建议您使用classList方法可以放弃IE9及以下版本。

如果您想尽可能获得速度优势，但仍然支持所有浏览器，那么这里是一个polyfill：

function hasClass( element, className ){
  if( element.classList && element.classList.contains ){
    hasClass = function classList_contains( element, className ){
      return element.classList.contains( className );
    }
  }
  else {
    hasClass = function className_match( element, className ){
      return new RegExp( '\\b' + className + '\\b' ).test( element.className );
    }
  }

  return hasClass( element, className );
}

Answer 4

如果您使用的是jQuery，请使用

检查类是否存在而不是类名比较

   $(thisform.elements[i]).hasClass('selValidate');

如果您只想使用Javascript解决方案，请使用此库classie，这有助于使用hasClass（）方法检查类的存在。

如果=一个类，但有两个类

4 个答案: