Связать data-атрибуты по клику
Привет! Как связать data-thumb="i" с data-slide="i" по клику на
.slides-bullets a <ul class="slides"> <li class="right" data-thumb="1"><img/><li> <li class="active" data-thumb="2"><img/></li> <li class="left" data-thumb="3"><img/></li> </ul> <ol class="slides-bullets"> <li><a data-slide="1"></a></li> <li><a data-slide="2"></a></li> <li><a data-slide="3"></a></li> </ol> |
Количество элементов этих списков всегда равны и всегда следуют по порядку, то есть, например, второй элемент LI первого списка, всегда будет соответствовать второму из второго?
|
Да, порядок последовательный и соответствие сохранится. Мне нужно получить содержимое класса из первого списка - примерно знаю как реализовать. Но как связать активный по клику из ol списка элемент с соответствующим по индексу - ul?
|
Зачем вам классы, если последовательность всегда строгая проще использовать индекс элемента в наборе:
$('ol.slides-bullets').finf('a').click(function() { alert($('ul.slides').find('li').eq($(this).index()).html()) }) |
$('ol.slides-bullets').find('a').click(function() { $('ul.slides').find('li').eq($(this).index()).css("color","red"); }) Работает только для первого элемента. |
Hey,you,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function() { var a = $('ol.slides-bullets').find('a'), li = $('ul.slides').find('li'); a.click(function(event) { event.preventDefault() li.eq(a.index(this)).css("background", "red"); } ) } ); </script> </head> <body> <ul class="slides"> <li class="right" data-thumb="1"><img/>1</li> <li class="active" data-thumb="2"><img/>2</li> <li class="left" data-thumb="3"><img/>3</li> </ul> <ol class="slides-bullets"> <li><a data-slide="1">1</a></li> <li><a data-slide="2">2</a></li> <li><a data-slide="3">3</a></li> </ol> </body> </html> |
Спасибо,
почитал в направлении .eq(), тоже работает: <ul class="slides"> <li class="right">img 1</li> <li class="active">img 2</li> <li class="left">img 3</li> </ul> <ul class="slides-bullets"> <li><button>Кнопка 1</button></li> <li><button>Кнопка 2</button></li> <li><button>Кнопка 3</button></li> </ul> var $bullets = $('.slides-bullets button'); $('ul').on('click', 'button', function() { var indx = $bullets.index(this); $('ul.slides li').eq(indx).css("color","red"); }); |
Часовой пояс GMT +3, время: 18:30. |