Связать 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:01. |