Как применить одно и то же событие jQuery к множеству элементов?

Question

Амаяк

wordpress , javascript

Как применить одно и то же событие jQuery к множеству элементов?

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

1 декабря 2023 г. 15:39

Ответы на вопрос 1

Похожие вопросы

Answer 1

Вы можете применить одно и то же событие к множеству элементов, используя селектор jQuery, который выбирает все элементы, соответствующие определенному условию. Следующий код покажет вам, как это сделать:

```javascript
$('.card').click(function () {
    var distanceToTopOfWindow = $(this).offset().top;
    var distanceToTopOfDocument = $(this).offset().top - $(window).scrollTop();

    console.log('Расстояние от карточки до верхней части экрана: ' + distanceToTopOfWindow);
    console.log('Расстояние от карточки до верхней части документа: ' + distanceToTopOfDocument);
});
```

В данном коде, `$('.card')` это селектор jQuery, который выбирает все элементы HTML с классом `card`. Код внутри функции `click()` будет выполняться для каждого из этих элементов при клике.

`$(this)` это специальная переменная, которая ссылается на элемент, на котором было совершено событие. То есть если вы кликнете на одну из карточек, `$(this)` будет ссылаться на эту карточку.

Метод `offset()` возвращает координаты текущего элемента относительно документа. Как видите, здесь используется свойство `top`, которое возвращает расстояние от элемента до верхней части документа.

Метод `scrollTop()` возвращает текущую прокрутку окна (сколько пикселей было прокручено сверху). Поэтому, `$(this).offset().top - $(window).scrollTop();` даст вам расстояние от элемента до верхней части видимой области экрана.