Выполнение скрипта в контексте элемента
Абстрагируемся.
Есть скрипт (слайдер), и есть 2 блока для которых он должен выполнятся. Но т.к. в одном блоке может быть 4 слайда а в другом, скажем, 3, выполнение одного и того-же срипта для обоих будет не правильным, ибо в скрипте происходит подсчёт количества слайдов, и там много ещё чего поламается. К тому-же при нажатии переключателя в одном блоке происходит смена слайда и в другом... В идеале - чтобы скрипт инициализировал себя для каждого из двух блоков отдельно. Сейчас скрипт подключается перед закрытием body, а начинается его выполнение со строчки $(document).ready(function () { p.s. можно конечно элементам второго блока задать другие классы и продублировать скрипт с этими изменениями, но я уверен что есть способ использовать ОДИН скрипт для обоих элементов. |
Цитата:
|
kvizor34, :) Мысли правильные
|
Ну к примеру, вот код для кнопки переключателя слайдов:
$(document).ready(function () {
$('.right').click(function() {
nextSlide();
});
});
элемент с классом .right есть как и в первом так и во втором блоке, соответственно функция сработает и поменяет мне слайд для обоих блоков. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div>
<span>текст1</span>
<button class="right">кнопка</button>
</div>
<div>
<span>текст2</span>
<button class="right">кнопка</button>
</div>
<script>
$(document).ready(function () {
$('.right').click(function() {
$(this).prev().html('другой текст');
});
});
</script>
</body>
</html>
вот вам пища для размышления. если лень думать, в этом форуме, куча примеров ротаторов контента. просто поискать. |
Если я вас правильно понял, то отбор всех элементов при выполнении, в моём случае должен быть относительным?
|
Цитата:
а так можно дать элементу доп. класс и ориентироваться на него. |
Спасибо! мысль понял, как реализую отпишу!)
|
Цитата:
this->родитель->родитель->сосед с классом slidewrapper иными словами - мне нужно добраться до .slidewrapper через .right
<div class="slider">
<div class="slidewrapper"></div>
<div class="switch">
<div class="buttons">
<div class="right"></div>
</div>
</div>
</div>
|
$(this).parent().parent().siblings(".slidewrapper");
|
Цитата:
я как закончу отпишу |
$(this).parentsUntil(".slider").siblings(".slidewrapper");
можно еще так |
Хочу поместить в переменную селектор вида: элемент->родитель->сосед с классом slides->все дочернии li
liSelector = $(this).parent().siblings('.slides').child('li');
Но консоль ругается( |
children('li')
|
Всё получилось
Наконец то я победил этот скрипт)
нужно было просто освоить навигацию по DOM дереву в js. Вся суть оказалась в том, чтобы сделать отбор элементов (селекторы) внутри функции ОТНОСИТЕЛЬНЫМ. Таким образом при любом событии на элементе, все функции будут выполнятся ТОЛЬКО относительно этого элемента. Считаю что тему можно закрыть. |
| Часовой пояс GMT +3, время: 10:08. |