Как проверить имя класса, если назначено несколько классов?

0

Я хочу проверить имя класса с помощью JS. Но поскольку элемент имеет несколько классов, используемая команда не работает. Как я могу проверить один класс?

HTML

<div class="first_class second_class third_class"> </div>

JS

var trg = e.target;

if ( trg.classList.contains('third_class') ) {

     console.log(trg);
   }
  • 0
    Согласно этой статье это должно работать. Вы используете старый браузер?
Теги:

4 ответа

1
Лучший ответ

contains - это метод подчеркивания - метод native array, который он использует, - indexOf однако ни один из них не будет работать, потому что объект, возвращаемый classList, не является реальным массивом, поэтому мы должны применить его к методу indexOf массива:

if ( Array.prototype.indexOf.call( trg.classList, 'third_class' ) > -1 ) {
    console.log(trg);
}

Если вы используете подчеркивание:

if ( _.toArray( trg.classList ).contains( 'third_class' ) ) {
    console.log(trg);
}
Поделиться
  • 0
    Не лучше ли разделить классы на массивы и затем вызвать indexOf? Вы также избежите ложных срабатываний
  • 0
    @SamuelBolduc Первый метод использует метод массива в массивоподобном списке; вторая преобразует список в массив, затем использует метод ярлыков (который сам вызывает метод массива). Там нет опасности ложных срабатываний.
2

В jQuery:

$( "#mydiv" ).hasClass( "foo" )
Поделиться
  • 0
    +1. Это то, для чего хорош jQuery (например, поддержка кросс-браузерной работы)
1

classList в настоящее время недоступен.

Используйте либо классName.indexOf, либо className.split(...) или получите полис заполнение класса: https://github.com/remy/polyfills

Поделиться
1

Если вы хотите остаться с чистым Javascript и избегать сторонних библиотек

var trg = e.target;
if (trg.className.split(' ').indexOf('third_class') > -1) {
  console.log(trg);
}

Если вы используете indexOf в строке напрямую, вы можете получить ложные срабатывания (например, если вы ищете "foo", и у вас есть класс "глупый", вы получите ложный результат).

Помните, что Internet Explorer <9 не поддерживает indexOf. Если вам необходимо его поддерживать, используйте полиполк или метод из сторонней библиотеки, такой как jQuery.

Поделиться
  • 0
    ... но здесь возможны ложные отрицания : когда классы ограничены какой-либо другой формой пробела, они не будут пойманы. Вместо использования строковых манипуляций и / или classList className (что могло бы решить эту проблему), при использовании classList вместо className , поскольку он уже знает, что представляют собой отдельные классы.
  • 0
    Я задавался вопросом об этом во время написания, но я подумал: «ну, имена классов всегда разделяются пробелами» ... Я до сих пор не знаю, в каком случае это не так, но я думаю, мы никогда не узнаем ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню