2012-02-17 5 views
1

私はカルーセルで作業しています。index()を使用したjquery関数

スライドが変更されるたびに、そのスライドのインデックス値が取得されます。

スライドが3つあります。 0-2はインデックス値です。

ここでは、どのスライドがアクティブであるかを示す3つの点について、このhtmlをページに表示しています。したがって、ドットが白い場合、スライドはアクティブです。

これは単に、要素に「act」クラスを追加することによって行われます。

<a id="th_1" class="thumb act"></a> 
<a id="th_2" class="thumb"></a> 
<a id="th_3" class="thumb"> </a> 

「th_1」がアクティブであることがわかります。他の人はCSSの中に灰色の点があります。

とにかく、私はこれでインデックスを持っているが、コードをJS:

上記
var slide = $(this).find('.slideshow.activated'); 
var index = slide.index(); 

、私たちは、クラスのアイテムとアクティブを持っている。このスライドDIV、内の要素を見つけます。 "this"はコンテナdivです。

"act"クラスを上記のように正しいhtml要素に追加する関数にする方法はわかりません。

おそらく、ゼロベース(th_0、th_1、th_2)になるように要素名を変更し、正規表現を使用する必要がありますか?

誰かがこれに関するヒントを知っているのだろうかと思います。

ありがとうございました

答えて

1
$('.thumb').removeClass('act').eq(index).addClass('act'); 
ような何かを行うことができます
0

これは役に立ちますか?

var slide = $(this).find('.slideshow.activated'); 
var index = parseInt(slide.index()) + 1; 
$('.thumb').removeClass('act'); 
$('#th_'+index).addClass('act'); 
1

私が正しく理解していれば、あなたはスライドのdivに能動素子のゼロベースのインデックスを持っていて、クラスthumbを持っているものの中で同じインデックスを持つ要素を選択します。

その要素にクラスactを追加するために例えばので、あなたは、$(".thumb").slice(index, 1)でこれを行うことができます。

$(".thumb").slice(index, 1).addClass('act'); 

あなたはまた、以前にアクティブ素子からクラスを削除する必要がある場合は、あなたと便利これを行うことができます

$(".thumb").removeClass('act').slice(index, 1).addClass('act'); 

(あなたの要素がIDを持っている場合はそれも気にしない)、このアプローチを使用してIDを変更する必要はありません。スライドdivとthumb要素の要素間には1-1の対応が必要です。

0

インデックスを変更する必要はありません、あなたは

$('a.thumb').removeClass('act'); 
$('#th_' + (index + 1)).addClass('act'); 
関連する問題