Простая функция jQuery для проверки div ClassName

Question

Я написал очень простую функцию для проверки имени класса тега. Я прикрепил его к div(s), используя .attr() и, кажется, не проблема для предупреждения.

Тем не мение, $(this).attr('class') не может показать правильное имя класса и просто отобразить

"Неопределенные"

, На самом деле, я хочу сделать больше вещей $(this)Так что очень плохо, что я останавливаюсь в самом начале.

Кто-нибудь скажет мне, почему это произошло и как это исправить?

<div class="testing class1" >Something here</div>
<div class="testing class2" >Something here</div>    
<script>

$("div.testing").attr('onclick', 'checkClass()');

function checkClass(){
  alert( $(this).attr('class'));
  // what do something more with "$(this)"
}

Answer 1

Вы должны передать это функции, потому что $(this) = window;

пожалуйста попробуйте это:

$("div.testing").attr('onclick', 'checkClass(this)');
function checkClass(e){
  alert( e.className);
  // what do something more with e, this is you clicked element
}

Answer 2

Хотя у jQuery есть собственные методы для добавления / удаления классов из / в элементы, для перечисления ничего не нужно. Поэтому вы должны использовать нативный метод js.

var checkClass = e => {
  alert(e.target.classList)
}

$("div.testing").click(checkClass)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testing class1" >Something here</div>
<div class="testing class2" >Something here</div>

Answer 3

Попробуйте реализовать это следующим образом, ваш код будет выводить undefined внутри тревоги, потому что this Рекомендации checkClass() функция, а не элемент, на который вы пытаетесь ориентироваться, см. демонстрацию ниже, вы должны научиться делать простой плагин

$.fn.checkClass = function() {
  $(this).on('click', function() {
    console.log($(this).attr('class'));
  });
}
$("div.testing").checkClass();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testing class1">Something here</div>
<div class="testing class2">Something here</div>