Если "this" в функции является определенным классом

137
16

У меня есть делегат, который вызывается при нажатии некоторых элементов DOM с использованием их идентификатора или класса, и я использую "this" внутри функции, но как бы узнать, какой класс или идентификатор "это" на самом деле?

Вот мой код:

$(document).delegate("#lg-menu li, #xs-menu li, .list-item", "click", function(e) { 
a = $(this).attr("alpha");
b = $(this).attr("bravo");
c = $(this).attr("charlie");
d = parseInt($(this).attr("delta"));
}

спросил(а) 2021-01-19T18:50:06+03:00 9 месяцев, 1 неделя назад
1
Решение
64

this относится к объекту DOM, который вызвал событие, поэтому вы можете просто использовать либо методы DOM, либо методы jQuery для проверки его или его родителей:

$(document).delegate("#lg-menu li, #xs-menu li, .list-item", "click", function(e) { 
var item = $(this);
// see which selector the item matches
if (item.is("#lg-menu li") {
// must be #lg-menu li

} else if (item.is("#xs-menu li") {
// must be #xs-menu li

} else {
// must be .list-item

}
}

.is() завершает всю селекторную оценку для вас. Вы также можете опросить отдельные свойства элемента, такие как:

item.hasClass(".list-item")               // does the item have a .list-item classname
item.parents("#lg-menu").length !== 0 // does the item have a #lg-menu parent
item.parents("#xs-menu").length !== 0 // does the item have a #xs-menu parent
this.tagName === "LI" // is the item an <li> tag

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

$(document).delegate("#lg-menu li", "click", function(e) { 
// code here
});

$(document).delegate("#xs-menu li", "click", function(e) {
// code here
});

$(document).delegate(".list-item", "click", function(e) {
// code here
});

ответил(а) 2021-01-19T18:50:06+03:00 9 месяцев, 1 неделя назад
65

чтобы получить идентификатор этого, вы можете прочитать свойство id элемента dom, например

var id = this.id;

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

var hasActive = $(this).hasClass('active')

ответил(а) 2021-01-19T18:50:06+03:00 9 месяцев, 1 неделя назад
46

Вы можете войти ваш this объект и выяснить, какие поля он содержит:

$(document).delegate("#lg-menu li, #xs-menu li, .list-item", "click", function(e) { 
console.log(this);
...
}

Вы также можете настроить this вручную для функции с использованием метода bind(thisArg) описанного здесь

ответил(а) 2021-01-19T18:50:06+03:00 9 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема