Question

<script src="jquery.js"></script>
<button class="hello bello jello">start text</button>
<script>
$("button").on("click", function(event) {
    var lo = event.target.classList
    console.log(lo.indexOf("hello"))
})
</script>

我希望上面的代码段能够打印0，但它会抛出错误lo.indexOf is not a function。

是不是将event.target.classList键入为数组？

Answer 1

没有indexOf方法，classList是arrayLike对象。但是contains()有一个：

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 2

classList property是DOMTokenList collection，并且它没有.indexOf()方法。以下是一些选项：

选项＃1

使用DOMTokenList方法将Array.from()集合转换为数组以检查：

var hasClass = Array.from(event.target.classList).indexOf('name') > -1;

选项＃2

使用classList.contains() method检查：

var hasClass = event.target.classList.contains('name');

选项＃3

由于数组上存在.indexOf()方法，您可以使用.call()方法使用classList调用该方法（其中字符串'name'是您的类正在检查）：

var hasClass = [].indexOf.call(event.target.classList, 'name') > -1;

选项＃4

此选项拥有最多的浏览器支持，因为所有浏览器都支持className property。

className属性返回元素类的字符串。您可以使用正则表达式来测试字符串是否包含所需的类（这涵盖了类name是唯一类的实例，以及当有多个类时类name被空格分隔的情况）。

var hasClass = /(^| )name( |$)/i.test(event.target.className);

你也可以把它变成一个函数：

function hasClass (element, className) {
  return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}

选项＃5

如果你正在使用jQuery，只需使用.hasClass() method：

var hasClass = $(event.target).hasClass('name');

Answer 3

当您使用jQuery时，使用hasClass()检查被点击的元素是否包含指定的类。

另外，在事件处理程序中使用$(this)来引用单击的元素。

确定是否为任何匹配的元素分配了给定的类。

$("button").on("click", function(event) {
    console.log($(this).hasClass('hello'));
});

Answer 4

您可以使用indexOf()函数在classList上使用toString()：

event.target.classList.toString().indexOf('hello')

然后您可以按如下方式使用它：

if (~event.target.classList.toString().indexOf('hello')) {
  // The target's class list contains the phrase 'hello'
}

注意：对于以下类，这也会返回true：helloworld和_hello_（这是indexOf()打算执行的方式）。

event.target.classList没有indexOf方法

4 个答案:

选项＃1

选项＃2

选项＃3

选项＃4

选项＃5