Если нажатие сделано до и после
Ребета, подскажите нубу. Есть такая конструкция:
<div class="p-nav-inner"> <button role="button" class="owl-dot"></button> <button role="button" class="owl-dot active"></button> <button role="button" class="owl-dot"></button> </div> Оно динамическое, нужно что бы при нажатий на кнопку до owl-dot active происходило одно событие, и при нажатий после происходило другое событие! Спасибо! |
Цитата:
|
Класс active меняется
|
Цитата:
document.querySelector('div.p-nav-inner button:first-child').addEventListener('click', function() {
//здесь выполнение кода для первой кнопки
})
для последней тоже самое, но заменив first-child на last-child и со своим кодом в обработчике. Можно делегировать обработку щелчков родителю p-nav-inner и в обработчике проверяя какая кнопка нажата, например по тексту кнопки, или добавить им tabindex и по нему, и т.п., выполнять соответствующее действие. |
Да нет, так не пойдет. Возможно я не правильно выразился... Конечно кнопок может быть разное количество а не только 3.
|
Цитата:
|
Вот пример https://owlcarousel2.github.io/OwlCa...autowidth.html
Это слайдер, кнопки это навигация. Кнопок столько же сколько и слайдов, а класс active менятся к другим кнопкам в зависимости от активного слайда |
У этого слайдера куча параметров, как методов так и событий, в которых можно узнать индексы элементов. Я наизусть не помню всего, но можно это использовать. Но вы так и не ответили зачем это нужно узнавать.
|
ethereal,
почитайте документацию слайдера, может все решить можно уже готовым. А узнать положение это конечно по индексу в наборе, на примере кнопок выше:
<div class="p-nav-inner">
<button role="button" class="owl-dot">before</button>
<button role="button" class="owl-dot">before</button>
<button role="button" class="owl-dot active">active</button>
<button role="button" class="owl-dot">after</button>
<button role="button" class="owl-dot">after</button>
<button role="button" class="owl-dot">after</button>
</div>
<script>
var btn = [...document.querySelectorAll('button.owl-dot')];
btn.forEach((e) => {
e.addEventListener('click', (e) => {
var index_act = btn.indexOf(btn.filter((e) => e.classList.contains('active'))[0]),
index_src = btn.indexOf(e.target);
if(index_src < index_act) console.log('Press button before');
if(index_src > index_act) console.log('Press button after');
})
});
</script>
|
ethereal,
:-? |
Покороче
(И без форичей:) )
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div class="p-nav-inner">
<button class="owl-dot">before</button>
<button class="owl-dot">before</button>
<button class="owl-dot active">active</button>
<button class="owl-dot">after</button>
<button class="owl-dot">after</button>
<button class="owl-dot">after</button>
</div>
<script>
document.querySelector('.p-nav-inner').addEventListener('click', (e) => {
if(e.target.matches('button.active~button'))
console.log('Press button after');
else if (!e.target.classList.contains('active'))
console.log('Press button before');
});
</script>
</body>
</html>
role="button" тоже не нужна. Она для button по дефолту назначается |
| Часовой пояс GMT +3, время: 01:14. |