Question

我正在制作一个旋转木马，我想在点击时将点与图片匹配（并在它们之间导航）。所以，为了做到这一点，我用这种方式用两个元素的jQuery创建了一个数组：

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

由于它们的数量相等，我想向它们添加一个click事件，以便匹配图像数组的位置（例如第一个图像，第二个图像等）与点阵。类似的东西：

$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

假设你的所有点元素都在一个包装器中，你可以使用jQuery的内置index（）方法来获取.owl-dot在该包装器中的索引位置，例如

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

上面的代码为您提供了索引，然后您可以使用该索引来检索图像，例如类似的东西：

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

这是一个Codepen，请点击字母并检查您的控制台。

为两个相等的数组（数量）提供索引，并在click事件上匹配它们

2 个答案: