如果 = 一个班级，但有两个班级

Question

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

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

这是 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()可以接受正则表达式，这可能很强大。 :)

编辑：

根据 Barney 的评论，我建议使用正则表达式（正如我之前提到的）以避免在您可能具有相似类名（例如selValidate和selValidateOff或类似名称）的情况下出现错误匹配。

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

两个都不错，真的。 我只取决于您希望搜索范围有多窄。

这是一个不错的备忘单，用于开始使用 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类的.classList ，但我不知道您需要针对哪些浏览器。

.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
    }
}

此外，仅当您想为左侧运算符赋值时才使用= （这就是它的用途）。 ==是类型强制相等（或“equal-ish”）测试，而===是严格（非强制）相等测试。

Answer 3

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

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

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

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

编辑：在 jsperf 上运行一些测试后，似乎classList通常要快得多（唯一不是这种情况的浏览器是 IE11）。 出于这个原因——并且因为classList.contains是一个 API，旨在精确地完成所讨论的任务（而className.match是一个kludge）——如果你能负担得起classList IE9 及更低版本，我建议使用classList方法。

如果你想在可能的情况下获得速度优势但仍然支持所有浏览器，这里有一个 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() 方法检查类的存在。