Блог

Главная - Вопросы по программированию - Как мне определить выбранный элемент как $ (this)?

Как мне определить выбранный элемент как $ (this)?

#jquery

#jquery

Вопрос:

Я хочу добавить active класс только к .element тому, который получает щелчок.

Проблема в том, что если у меня много элементов с element классом, все они получат active класс.

Вот что я пробовал:

 $(document).mousedown(function(event) {
    if ($(event.target).closest('.element').length) {
        $(this).addClass('active');
    }
});

Это не работает по причине, которая $(this) не определена.

Как мне определить, что щелкнул '.element' $(this) ?

Комментарии:

1. Исправьте местоположение, в котором вы добавляете прослушиватель событий, или используйте то, что у вас уже есть в вашем скрипте: $(event.target).closest('.element').length

Ответ №1:

Почему бы не установить прослушиватель как

 $(document).on('mousedown', '.element', function(event) {
    $(this).addClass('active');
})

Что это делает, так это устанавливает в документе один прослушиватель, который прослушивает событие mousedown для всплывающего окна dom. Если и только если событие происходит для объекта с классом, включающим ‘element’, тогда функция сработает. Внутри функции $ (this) — это элемент ‘.element’, поэтому вы можете игнорировать любое дальнейшее тестирование близости. Вы могли бы настроить прослушиватель на ‘.element’, я просто делегировал его в document в качестве общей практики для уменьшения количества слушателей.

И если вы хотите удалить активный класс из текущего ‘.element’, который был нажат, затем измените на

 $(document).on('mousedown', '.element', function(event) {
    $('.element.active').removeClass('active');
    $(this).addClass('active');
})

Попробуйте ниже.

     $(document).on('mousedown', '.element', function(event) {
        $('.element.active').removeClass('active');
        $(this).addClass('active');
    }) 
 .active 
{ background-color: cyan;
}
.element {
color: magenta;
cursor: pointer;
padding: 4px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class='element'>Click me!</p>
<p class='element'>Click me!</p>
<p class='element'>Click me!</p>
<p class='element'>Click me!</p>
<p class='element'>Click me!</p>
<p class='element'>Click me!</p>
<p class='element'>Click me!</p>
Метки: