JavaScript 및 Jquery: 클릭한 요소의 인덱스 찾기
<p>슬라이드쇼를 만드는 중인데 다음 질문에 어려움을 겪고 있습니다. 라벨을 클릭할 때 배열에서 위치(인덱스)를 어떻게 찾나요? 다음 코드 섹션은 모든 태그</p>
<pre class="brush:php;toolbar:false;">this.thumbs = this.nav.find('a');</pre>
<p>어디부터 시작할까요?
한 가지 더 문제 - 라벨을 클릭하면 라벨 내부의 div 클래스를 전환해야 합니다(div 라벨은 promo_tumb_current 클래스를 가져와야 하고 해당 라벨이 있는 div는 클래스를 잃어야 합니다). </p>
<p>HTML 코드: </p>
<pre class="brush:php;toolbar:false;"><div class="promo_tumbs col_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>
함수 슬라이더(컨테이너, 탐색){
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({
'왼쪽 여백': 좌표 || -(this.current * this.li_width)
})
}
Slider.prototype.set_current = 함수(dir){
var pos = this.current;
if (dir === '다음') {pos++}
else if (dir === '이전') {pos--}
this.current = (pos < 0) ? this.li_len - 1 : pos % this.li_len;
반환 위치;
}
var 슬라이더 = new Slider($('div.promo_inner ul'), $('div.promo_tumbs'));
슬라이더.nav.find('div').on('클릭', function(){
if ($(this).attr("data-dir") === 정의되지 않음 ) {
var index = Slider.thumbs.index();
console.log(색인)
} 또 다른 {
슬라이더.set_current($(this).data('dir'));
}
슬라이더.전환();
})</pre>
<p></p>
