Question

我目前正在使用这个jQuery Cycle Plugin： 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>

现在，它应该以幻灯片方式和风格方式工作。但是，我正在尝试使用jQuery为当前显示的缩略图链接（包含在'products-slideshow-thumbs'类中）添加一个类。
我在上面的代码中使用的jQuery在我点击缩略图链接时添加了类，但是当我点击另一个缩略图链接时，两个缩略图链接都保留了“当前”类。有没有办法确保只有一个链接（当前链接）保持“当前”类？

任何建议都将不胜感激！谢谢你的阅读。

Answer 1

改变这个：

$(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中删除了

jQuery Cycle Plugin，将类添加到当前幻灯片缩略图/链接

1 个答案: