1

現在、この 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は、サムネイルリンクをクリックするとクラスを追加しますが、別のサムネイルリンクをクリックすると、両方のサムネイルリンクが「現在の」クラスを保持します。1 つのリンク (現在のリンク) だけが「現在の」クラスを保持するようにする方法はありますか?

どんな提案でも大歓迎です！読んでくれてありがとう。

4

1 に答える 1

2

これを変える：

$(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");
    });
  });

私がそこで何をしたか見てください。current-class を に追加する前に、他の$(this)すべてのクラスから削除しましたproducts-slideshow-thumbs li a

于 2011-04-05T15:50:36.620 に答える