javascript - 如何将元素索引与数组索引匹配？

Question

我正在应用一系列列表项和图像数组中的背景图像。

我创建了一组图像“工件”:

var artifacts = [
  '/img/artifacts/artifact-1.svg',
  '/img/artifacts/artifact-2.svg',
  '/img/artifacts/artifact-3.svg',
  '/img/artifacts/artifact-4.svg',
  '/img/artifacts/artifact-5.svg',
  '/img/artifacts/artifact-6.svg',
  '/img/artifacts/artifact-7.svg'
];

HTML 标记如下所示。

<ul class="slick-dots">
  <li>1</li>
  <li>2</li>
  <li class="slick-active">3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

悬停/选定颜色有一组“选定”图像。

var artifactHover = [
  '/img/artifacts/artifact-1-hover.svg',
  '/img/artifacts/artifact-2-hover.svg',
  '/img/artifacts/artifact-3-hover.svg',
  '/img/artifacts/artifact-4-hover.svg',
  '/img/artifacts/artifact-5-hover.svg',
  '/img/artifacts/artifact-6-hover.svg',
  '/img/artifacts/artifact-7-hover.svg'
];

到目前为止，这是我的 JavaScript:

 $('.slick-dots li').css('background-image', function(i) {
    return 'url("' + artifacts[i % artifacts.length] + '")';
  });
  $('.slick-dots .slick-active').css('background-image', function(i) {
    return 'url("' + artifactHover[i % artifactHover.length] + '")';
  });


  $('.slick-dots li button').click(function() {

    $('.slick-dots li').css('background-image', function(i) {
      return 'url("' + artifacts[i % artifacts.length] + '")';
    });

    var index = $(this).parent().index();

    $(this).parent().css('background-image', function(i) {
      return 'url("' + artifactHover[index] + '")';
    });

  });

因此，当用户单击列表项时，它会根据单击的元素从数组中提取适当的图像。

如果列表项多于图像，那么它将重新开始并从头开始。我的问题是将当前选定的列表项与适当的悬停图像匹配。通过将 index() 用于工件悬停，如果我选择的列表项大于图像数组中的数量，它会在其中放置一个空白图像，而不是从列表的开头重新开始。

Answer 1

您只需要使用它，以便从头开始。

artifactHover[index%artifactHover.length]