Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Связать data-атрибуты по клику (https://javascript.ru/forum/jquery/54172-svyazat-data-atributy-po-kliku.html)

Hey,you 06.03.2015 19:01
Связать 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>

laimas 06.03.2015 19:32
Количество элементов этих списков всегда равны и всегда следуют по порядку, то есть, например, второй элемент LI первого списка, всегда будет соответствовать второму из второго?

Hey,you 06.03.2015 19:41
Да, порядок последовательный и соответствие сохранится. Мне нужно получить содержимое класса из первого списка - примерно знаю как реализовать. Но как связать активный по клику из ol списка элемент с соответствующим по индексу - ul?

laimas 06.03.2015 19:47
Зачем вам классы, если последовательность всегда строгая проще использовать индекс элемента в наборе:

$('ol.slides-bullets').finf('a').click(function() {
    alert($('ul.slides').find('li').eq($(this).index()).html())   
})

Hey,you 06.03.2015 21:22 
$('ol.slides-bullets').find('a').click(function() {
    $('ul.slides').find('li').eq($(this).index()).css("color","red"); 
})


Работает только для первого элемента.

рони 06.03.2015 22:09
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>

Hey,you 06.03.2015 22:25
Спасибо,
почитал в направлении .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.