javascript event.target.classList 没有 indexOf 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31608928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
event.target.classList doesn't have indexOf method
提问by blade091
<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>
I expected the above snippet to print, 0but it threw out an error lo.indexOf is not a function.
我希望上面的代码段可以打印，0但它抛出了一个错误lo.indexOf is not a function。
Isn't event.target.classList typed as array?
event.target.classList 不是作为数组输入的吗？
回答by blade091
There is no indexOfmethod, classListis arrayLike object.
But there is contains()one:
没有indexOf方法，classList就是arrayLike对象。但是有contains()一个：
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
回答by Josh Crozier
The classListpropertyis a DOMTokenListcollectionand it doesn't have a .indexOf()method. Here are a few options:
该classList属性是一个DOMTokenList集合，它没有.indexOf()方法。这里有几个选项：
Option #1
选项1
Convert the DOMTokenListcollection to an array using the Array.from()method to check:
DOMTokenList使用Array.from()检查方法将集合转换为数组：
var hasClass = Array.from(event.target.classList).indexOf('name') > -1;
Option #2
选项#2
Use the classList.contains()methodto check:
var hasClass = event.target.classList.contains('name');
Option #3
选项#3
Since the .indexOf()method exists on arrays, you can use the .call()method to invoke the method with using the classList(where the string 'name'is the class you are checking):
由于该.indexOf()方法存在于数组上，因此您可以使用该.call()方法来调用该方法，并使用classList（其中字符串'name'是您正在检查的类）：
var hasClass = [].indexOf.call(event.target.classList, 'name') > -1;
Option #4
选项#4
This options has the most browser support since the classNamepropertyis supported in all browsers.
此选项具有最多的浏览器支持，因为所有浏览器都支持该className属性。
The classNameproperty returns a string of the element's classes. You could use a regular expression to test if the string contains the desired class (this covers instances where the class nameis the only class, and when the class nameis separated by whitespace when there are multiple classes).
该className属性返回元素类的字符串。您可以使用正则表达式来测试字符串是否包含所需的类（这包括该类name是唯一的类的情况，以及name当有多个类时该类用空格分隔的情况）。
var hasClass = /(^| )name( |$)/i.test(event.target.className);
You could also just turn this into a function:
你也可以把它变成一个函数：
function hasClass (element, className) {
return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}
Option #5
选项#5
If you're using jQuery, just using the .hasClass()method:
如果您使用 jQuery，只需使用以下.hasClass()方法：
var hasClass = $(event.target).hasClass('name');
回答by Tushar
As you're using jQuery, use hasClass()to check if the clicked element contains specified class.
当您使用 jQuery 时，用于hasClass()检查单击的元素是否包含指定的类。
Also, use $(this)inside event handler to refer to the element that is clicked.
此外，使用$(this)内部事件处理程序来引用被单击的元素。
Determine whether any of the matched elements are assigned the given class.
确定是否有任何匹配的元素被分配给给定的类。
$("button").on("click", function(event) {
console.log($(this).hasClass('hello'));
});
回答by Grant Miller
You can use indexOf()on a classListwith the toString()function:
您可以indexOf()在classList具有以下toString()功能的情况下使用：
event.target.classList.toString().indexOf('hello')
Then you can use it as follows:
然后您可以按如下方式使用它：
if (~event.target.classList.toString().indexOf('hello')) {
// The target's class list contains the phrase 'hello'
}
Note:This will also return true for classes such as:
helloworldand_hello_(which is howindexOf()was intended to perform).
注意：这也将返回 true 之类的类，例如：
helloworld和_hello_（这是indexOf()打算执行的方式）。
