8 (904) 510-21-51
info@htmlme.ru
Приветствую!
При создании сайта порой бывают ситуации, когда нужно сымитировать клик по элементу. Например, когда у нас есть подключаемые скрипты какого-то модуля или плагина, и нам нужно запустить некую функцию из него, которая в обычных условиях запускается нажатием на элемент. Нам же нужно запустить её при соблюдении определённых условий, но нет возможности запустить её напрямую. Копаться в js-файлах плагина геморройно, да и просто можно всё запороть. В таком случае нам приходит на помощь метод trigger().
Приведу более конкретный пример. У меня был слайдер с автоматической сменой слайдов, и он начинал работать, естественно, сразу после загрузки страницы. Но слайдер был не в шапке сайта, а гораздо ниже, и к тому моменту, когда пользователь доходил до места со слайдером, там уже показывался не первый слайд, а, скажем, четвёртый, пятый или любой другой. А нужно было, чтобы первый В слайдере была навигация, т.е. при клике на первый элемент загружался первый слайд. Всё логично)) Поэтому самым простым вариантом решения оказалось воспользоваться методом trigger(). Как только пользователь прокручивал страницу до места со слайдером, имитировалось нажатие на первый элемент навигации слайдера, и загружался первый слайд.
<div class="slider"> <!-- тело слайдера -->
<div class="slide1">Слайд 1</div>
<div class="slide2">Слайд 2</div>
<div class="slide3">Слайд 3</div>
</div>
<div class="slider-nav"> <!-- элементы навигации слайдера -->
<div class="nav1">Слайд 1</div>
<div class="nav2">Слайд 2</div>
<div class="nav3">Слайд 3</div>
</div>Итак, вот как это реализуется. Есть слайдер и несколько элементов навигации:
Для начала мы должны проверить, выполнены ли условия, при которых выполняется псевдо нажатие на элемент. В нашем случае этим условием является видимость первого элемента навигации слайдера на экране. Как это отследить читайте тут.
Ок, представим, что условие выполнено. Сначала не забудем подключить библиотеку JQuery (вставляем между тегами <head></head>):
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>А теперь сам код для имитации клика по первому элементу навигации:
<script type="text/javascript">
$(document).ready(function($) {
if (условие) {
$('.nav1').trigger('click');
}
});
</script>Таким образом с помощью метода trigger() мы сымитировали нажатие на первый элемент навигации слайдера, заставив его начать показ слайдов с начала.
На этом всё, всем удачи и пока!
