Форум

Hey,you · #1 (**permalink**) 06.03.2015, 19:01

Привет! Как связать 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 · #2 (**permalink**) 06.03.2015, 19:32

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

Hey,you · #3 (**permalink**) 06.03.2015, 19:41

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

laimas · #4 (**permalink**) 06.03.2015, 19:47

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

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

Hey,you · #5 (**permalink**) 06.03.2015, 21:22

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

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

рони · #6 (**permalink**) 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 · #7 (**permalink**) 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");
});

Форум

Справочник

Discord чат

Курсы javascript