Выберите div, если вы нажимаете на div или дочерний элемент - PullRequest
Новая
       1

Выберите div, если вы нажимаете на div или дочерний элемент

0 голосов
/ 03 февраля 2020

Я пытаюсь выбрать родительский класс, когда нажимаю на дочерний элемент, используя event.target. Я проверяю, является ли это div, видя, какой класс у него есть, и если это не div, я нахожу div, выбирая его из дочернего элемента, но тогда, похоже, он не работает, и это wont hide(). 

$(document).click(function(e){
    elem_id = $('#'+e.target.id);
    if(!elem_id.hasClass('mail_schedule_dropdown')) elem_id = $('#'+e.target.id).find('.mail_schedule_dropdown');
    elem_id.hide();
});

<div id="parent" class="mail_schedule_dropdown"><span>child</span></div>

Как выбрать родительский элемент, если я нажму div? Это не работает: 

elem_id = $('#'+e.target.id).find('.mail_schedule_dropdown');

Почему это не работает?

1 Ответ

1 голос
/ 03 февраля 2020

Вы просто смотрите в неправильном направлении. Из документов jQuery для .find():

Получить потомков каждого элемента в текущем наборе соответствующих элементов, отфильтрованных селектором, jQuery объекта, или элемент.

В вашем коде, если у выбранного элемента нет вашего класса, вы ищете его потомков для родительского элемента. Но на самом деле в этом случае кликнул именно ребенок, поэтому вам нужно найти его предков .

Есть несколько способов сделать это, но .closest() может быть наиболее подходящим: 

elem_id = $('#'+e.target.id).closest('.mail_schedule_dropdown');

Примечание на стороне

Имена переменных в коде меня немного смутили. elem_id вообще не является идентификатором, это фактический jQuery объект, представляющий элемент. Это кажется тривиальным, но при манипулировании идентификаторами в виде строк, элементов и селекторов, и когда ваш код становится более сложным, этого достаточно, чтобы вызвать ошибки в конце - по крайней мере, это случилось со мной! Вот моя версия для ясности: 

$(document).click(function(e){
    // Using '$' makes it clear that this represents a jQuery object;
    // The variable name makes it clear exactly what it is
    var $clicked = $('#'+e.target.id);
    if (!$clicked.hasClass('mail_schedule_dropdown')) {
        $clicked = $clicked.find('.mail_schedule_dropdown');
    }
    $clicked.hide();
});
...