Event.target.classList не имеет метода indexOf

<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 как массив?

ОТВЕТЫ

Ответ 2

classList свойство - это DOMTokenList коллекция и не имеет метода .indexOf(). Вот несколько вариантов:

Вариант №1

Преобразуйте коллекцию DOMTokenList в массив с помощью метода Array.from(), чтобы проверить:

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

Вариант № 2

Используйте метод classList.contains(), чтобы проверить:

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

Вариант № 3

Поскольку метод .indexOf() существует в массивах, вы можете использовать метод .call() для вызова метода с использованием classList (где строка 'name' - это класс, который вы проверяете):

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

Вариант № 4

Эти опции имеют большую поддержку браузера, так как свойство className поддерживается во всех браузерах.

Свойство 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():

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

Ответ 3

Когда вы используете jQuery, используйте hasClass(), чтобы проверить, содержит ли указанный элемент click указанный класс.

Кроме того, используйте $(this) внутри обработчика событий для обращения к элементу, который нажал.

Определите, назначен ли какой-либо из согласованных элементов данному классу.

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

Ответ 4

Вы можете использовать .indexOf() в .classList с помощью функции .toString():

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

Затем вы можете использовать его следующим образом:

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

Примечание.. Это также вернет true для классов, таких как: helloworld и _hello_ (как это предполагалось .indexOf()).