Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2019, 12:01
Новичок на форуме
Отправить личное сообщение для oleglantukh Посмотреть профиль Найти все сообщения от oleglantukh
 
Регистрация: 10.01.2019
Сообщений: 7

Как присвоить class определенному элементу списка?
Доброе время суток!
Помогите пожалуйста решить задачу.
Есть простой список из n-го количества элементов
<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>

Еще есть точно такое же количество элементов кнопок
<div class="owl-dots">
    <button role="button" class="owl-dot"></button>
    <button role="button" class="owl-dot"></button>
    <button role="button" class="owl-dot active"></button>
    <button role="button" class="owl-dot"></button>
</div>

Кнопки принадлежат к плагину Owl Carousel и текущий элемент выделяется классом "active".

Суть задачи в следующем, необходимо присваивать class active или current нужному элементу списка в зависимости от того, какой button на текущей момент имеет class active.

Думаю связать элементы списка и кнопки data-атрибутами, например должно получится примерно так:
<ul>
    <li data-item="1"></li>
    <li data-item="2"></li>
    <li data-item="3" class="current"></li>
    <li data-item="4"></li>
</ul>

<div class="owl-dots">
    <button data-item="1" role="button" class="owl-dot"></button>
    <button data-item="2" role="button" class="owl-dot"></button>
    <button data-item="3" role="button" class="owl-dot active"></button>
    <button data-item="4" role="button" class="owl-dot"></button>
</div>

Помогите пожалуйста написать скрипт, который будет находить button с классом active и присваивать класс active или current нужному элементу списка
Ответить с цитированием
  #2 (permalink)  
Старый 10.01.2019, 12:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,531

oleglantukh,
https://owlcarousel2.github.io/OwlCa...pi-events.html
Ответить с цитированием
  #3 (permalink)  
Старый 10.01.2019, 13:13
Новичок на форуме
Отправить личное сообщение для oleglantukh Посмотреть профиль Найти все сообщения от oleglantukh
 
Регистрация: 10.01.2019
Сообщений: 7

Сообщение от рони Посмотреть сообщение
oleglantukh,
https://owlcarousel2.github.io/OwlCa...pi-events.html
Дело в том что сам список отношения к плагину не имеет, мне нужен скрипт, который будет отслеживать какая кнопка в данный момент имеет класс active и присваивать класс элементу списка с таким же data-атрибутом
Ответить с цитированием
  #4 (permalink)  
Старый 10.01.2019, 13:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,531

oleglantukh,
по ссылке, первый пример, это то что вам нужно! никаких data-атрибут для этого не требуется, достаточно добавить class для ul.
Ответить с цитированием
  #5 (permalink)  
Старый 10.01.2019, 22:20
Новичок на форуме
Отправить личное сообщение для oleglantukh Посмотреть профиль Найти все сообщения от oleglantukh
 
Регистрация: 10.01.2019
Сообщений: 7

Сообщение от рони Посмотреть сообщение
oleglantukh,
по ссылке, первый пример, это то что вам нужно! никаких data-атрибут для этого не требуется, достаточно добавить class для ul.
Я понял, спасибо большое! Буду разбираться
Ответить с цитированием
  #6 (permalink)  
Старый 11.01.2019, 08:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,531

oleglantukh,
//возможно event.page.index
$('.owl-carousel').on('changed.owl.carousel', function(event) {
    $('ul li').removeClass('current').eq(event.item.index).addClass('current')
})
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2019, 17:35
Новичок на форуме
Отправить личное сообщение для oleglantukh Посмотреть профиль Найти все сообщения от oleglantukh
 
Регистрация: 10.01.2019
Сообщений: 7

Сообщение от рони Посмотреть сообщение
//возможно event.page.index
Спасибо большое, ваше решение помогло!
Вот готовый рабочий скрипт:

$('.owl-carousel').on('changed.owl.carousel', function(event) {
	$('ul li').removeClass('current').eq(event.page.index).addClass('current')
})
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Акардион меню из чекбоксов и списка, как сделать подсветку текущего элемента OliLoi jQuery 0 08.11.2016 07:15
Как добавить стрелку к первому элементу списка на css imedia Элементы интерфейса 4 13.10.2015 11:59
как программно присвоить id элементу <div> jeel Events/DOM/Window 10 07.06.2014 14:21
Как присвоить класс элементу после проверки cookies Round jQuery 20 17.10.2013 08:47
как тегу option с определенным value присвоить selected kichSman Общие вопросы Javascript 2 24.10.2009 02:14