Создание индекса jQuery для циклического перемещения по отдельным спискам - PullRequest
Новая
       5

Создание индекса jQuery для циклического перемещения по отдельным спискам

1 голос
/ 01 апреля 2012

Я пытаюсь создать простую, пользовательскую галерею.У меня есть два списка, один с изображениями, а другой с эскизами изображений.(Вот так: http://cl.ly/3R1a3X0f0H1S1a300j3c)

Вот список снимков экрана приложения: 

  <ul class="app-screens">  
    <li><img src="img/app-1.png" alt="Caption" /></li>
    <li><img src="img/app-2.png" alt="Caption" /></li>
    <li><img src="img/app-3.png" alt="Caption" /></li>
    <li><img src="img/app-4.png" alt="Caption" /></li>
  </ul>

А вот список уменьшенных изображений: 

    <ul class="app-thumbs">
      <li><a href=""/><img src="img/thumb-1.png" alt="" /></a></li>
      <li><a href=""/><img src="img/thumb-2.png" alt="" /></a></li>
      <li><a href=""/><img src="img/thumb-3.png" alt="" /></a></li>
      <li><a href=""/><img src="img/thumb-4.png" alt="" /></a></li>
    </ul>

По умолчанию первый большой палец должен быть активным и иметь соответствующий экран, показанный над ним. Если кто-то нажимает на третий большой палец, должен появиться третий экран (а все остальные должны быть скрыты).

Так что яв основном нужно указывать класс .active большим пальцем при нажатии, а также .show () соответствующий экран в экранах приложений. Просто не знаете, как на самом деле это сделать? Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

1 голос
/ 01 апреля 2012 
$('.apps-thumbs li').click(function(){
    var index = $(this).index();
    $('.app-screens li.selected').each(function(){
        $(this).removeClass('selected');
    });
    $('.app-screens').children()[index].addClass('selected');
});
0 голосов
/ 01 апреля 2012

Вы можете использовать .index() для доступа к индексу элемента в его родительском элементе. Когда вы знаете индекс, вы можете использовать .eq(1) или $('parent:eq(1)'); для доступа к элементу этого индекса в другом родительском элементе. 

function show(x) {
    $('.app-screens li').removeClass('active');
    $('.app-screens li').eq(x).addClass('active');
}

$(function() {
    show(0);

    $('.app-thumbs a').click(function() {
        show($(this).closest('li').index());        
        return false;
    });
});​

Fiddle

Это не изображения в скрипке, но вы, вероятно, можете увидеть, как это получилось бы так же, если бы они были.

Здесь я устанавливаю show(0) в DOMReady, чтобы показывать первое изображение, но с тем же успехом это можно было бы сделать, просто изменив разметку так, чтобы первый элемент всегда имел class="active".

...