Плагин jQuery Cycle, добавление класса к текущей миниатюре / ссылке слайда - PullRequest
Новая
       10

Плагин jQuery Cycle, добавление класса к текущей миниатюре / ссылке слайда

1 голос
/ 05 апреля 2011

В настоящее время я использую этот плагин jQuery Cycle: http://jquery.malsup.com/cycle/

И у меня есть следующий код: 

<script type="text/javascript">
// Slideshow cycle init
$(document).ready(function() {
    $('#slideshow').cycle({
      fx: 'fade',
      speed: 500
    });
});
function setSlide(index) {
     $('#slideshow').cycle(index);
}

// current link
 $(document).ready(function(){   
   $('ul.products-slideshow-thumbs li a').click(function(){
      $(this).addClass("current").removeClass("current"); // this is what I'm trying to work on..
    });
  });
</script>

<div id="slideshow" class="products-slideshow">
  <img src="product-slides/1.jpg" />
  <img src="product-slides/2.jpg" />
  <img src="product-slides/3.jpg" />
  <img src="product-slides/4.jpg" />
  <img src="product-slides/5.jpg" />
</div>

<ul class="products-slideshow-thumbs">
  <li><a onclick="setSlide(0);"><img src="product-slides/thumbs/1.jpg" /></a></li>
  <li><a onclick="setSlide(1);"><img src="product-slides/thumbs/2.jpg" /></a></li>
  <li><a onclick="setSlide(2);"><img src="product-slides/thumbs/3.jpg" /></a></li>
  <li><a onclick="setSlide(3);"><img src="product-slides/thumbs/4.jpg" /></a></li>
  <li><a onclick="setSlide(4);"><img src="product-slides/thumbs/5.jpg" /></a></li>
</ul>

Прямо сейчас, он работает, как и в режиме слайд-шоу, истиль мудрый.Однако я пытаюсь добавить класс к отображаемой в данный момент ссылке миниатюр (обернутый в класс 'products-slideshow-thumbs') с помощью jQuery.
jQuery, который есть в приведенном выше коде, добавляет класс, когда я нажимаюна ссылке с миниатюрами, но когда я нажимаю на другую ссылку с миниатюрами, ОБА ссылки на миниатюры сохраняют «текущий» класс.Есть ли способ убедиться, что только ОДНА ссылка (текущая ссылка) сохраняет «текущий» класс?

Любые предложения будут высоко оценены!Спасибо за чтение.

1 Ответ

2 голосов
/ 05 апреля 2011

Измените это: 

$(document).ready(function(){   
   $('ul.products-slideshow-thumbs li a').click(function(){
      $(this).addClass("current").removeClass("current"); // this is what I'm trying to work on..
    });
  });

на это: 

$(document).ready(function(){   
   $('ul.products-slideshow-thumbs li a').click(function(){
      $('ul.products-slideshow-thumbs li a').removeClass("current");
      $(this).addClass("current");
    });
  });

Видите, что я там делал?Прежде чем добавить текущий класс к $(this), я удалил его из всех остальных products-slideshow-thumbs li a

...