JavaScript と Jquery: クリックされた要素のインデックスを見つける
<p>スライドショーを作成していますが、次の質問で困っています - ラベルがクリックされたときに配列内の位置 (インデックス) を見つけるにはどうすればよいですか?次のコード セクションは、すべてのタグ </p> を取得します。
<pre class="brush:php;toolbar:false;">this.thumbs = this.nav.find('a');</pre>
<p>どこから始めますか?
もう 1 つ問題があります。ラベルがクリックされたときに、ラベル内の div のクラスを切り替える必要があります (div ラベルはクラス promo_tumb_current を取得する必要があり、そのラベルを持つ div はそれを失う必要があります)。 </p>
<p>HTML コード: </p>
<pre class="brush:php;toolbar:false;"><div class="promo_tumbscol_12">
<div data-dir="prev" class="prev"></div>
<div data-dir="next" class="next"></div>
<div class="promo_tumbs_centar">
<a href="#first"><div class="promo_tumb promo_tumb_current"></div></a>
<a href="#second"><div class="promo_tumb"></div></a>
<a href="#thrid"><div class="promo_tumb"></div></a>
<a href="#fourh"><div class="promo_tumb"></div></a>
<a href="#fifth"><div class="promo_tumb"></div></a>
<a href="#fifth"><div class="promo_tumb"></div></a>
<a href="#fifth"><div class="promo_tumb"></div></a>
</div>
</div></pre>
<p>JS代番号:</p>
<pre class="brush:php;toolbar:false;"><script>
関数 Slider(container, nav){
this.container = コンテナ;
this.nav = ナビ;
this.li = this.container.find('li');
this.li_width = this.li.first().width();
this.li_len = this.li.length;
this.thumbs = this.nav.find('a');
this.current = 0;
}
Slider.prototype.transition = 関数 (座標){
this.container.stop().animate({
'margin-left' : 座標 || -(this.current * this.li_width)
})
}
Slider.prototype.set_current = function(dir){
var pos = this.current;
if (dir === 'next') {pos }
else if (dir === 'prev') {pos--}
this.current = (pos < 0) ? this.li_len - 1 : pos % this.li_len;
返却位置;
}
var slider = new Slider($('div.promo_inner ul'), $('div.promo_tumbs'));
slider.nav.find('div').on('click', function(){
if ($(this).attr("データディレクトリ") === 未定義 ) {
var インデックス = slider.thumbs.index();
コンソール.ログ(インデックス)
} それ以外 {
slider.set_current($(this).data('dir'));
}
スライダー.トランジション();
})</pre>
<p></p>