인덱스를 두 개의 동일한 배열 (개수)로 지정하고 클릭 이벤트에서 일치 시키십시오.

Question

저는 회전 목마를 만들었으며 점에서 그림과 도트를 일치시키고 싶습니다 (그리고 그 사이를 탐색합니다). 그래서, 그렇게하기 위해서는,이 방법으로 두 elemets의 jQuery를 함께 배열을 만든 :

그들은 수의 등호 내가 위치를 일치시키기 위해 그들에 클릭 이벤트를 추가하고 싶습니다 때문에

var images = $('.images'); 
var imageslenght = images.length; 
console.log(imageslenght); //10 
var dot = $('.owl-dot'); 
var dotlenght = dot.length; 
console.log(dotlenght); //10 

(예를 들어, 제 1 이미지, 제 2 이미지 등)을 도트의 배열의 위치와 비교하는 단계를 포함한다. 같은 뭔가 :

$dot.click(function() { 
    $dotlenght.each(function(i) { 
     console.log(i); 
    }); 
    $imageslenght.each(function(i) { 
     console.log(i); 
    }); 
}); 

그들이 등등 두 번째 점을 클릭하면, 예를 들어, 당신이있어 이후거야 쇼에게 두 번째 이미지를 일치 할 수있는 방법이 있습니까?

Answer 1

예, 페이지를로드 한 후에 고유 한 배열 색인을 사용하여 모든 '.owl-dot'요소에 데이터 태그를 첨부하십시오.

var i = 0; 
$('.owl-dot').each(function() { 
    $(this).data('number', i); 
    i++; 
}); 

그런 다음 클릭 이벤트 핸들러를 추가하면 클릭 한 도트 번호를 읽을 수 있습니다. 당신의 도트의 모든 요소를 ​​가정

는

$('.owl-dot').click(function() { 
    var imageNumber = $(this).data('number'); 
    // now change the image according to the index 
    console.log('Array index: ' + imageNumber); 
}); 

Answer 2

당신이 래퍼 내에서, 예를 들어, .owl-dot의 인덱스 위치를 얻기 위해 jQuery의 인덱스에 내장() 메소드를 사용하여, 래퍼에

$('.owl-dot').click(function() { 
    console.log($('.owl-dot').index($(this))); 
}); 

위의 코드는 이미지를 검색하는 데 사용할 수있는 색인을 제공합니다. 뭔가 같은 :

$('.images').eq($('.owl-dot').index($(this)));

가 여기에 Codepen있어, 문자를 클릭 시도하고 콘솔을 확인합니다.