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

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]

Answer 2

不确定你的脚本有什么问题，但有一种更简单的方法来编写它。

只需使用 jQuery foreach 获取索引和元素以及一个临时变量来构建 URL 字符串，然后再将其传递给 jQuery.css()

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'
];



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'
];

/* each function can take two parameters:  i for index and elem for the actual DOM element */
$(".slick-dots li").each(function(i, elem) {



  var tmp_url = "url('" + artifacts[i % artifacts.length] + "')";

  /* set custom property on element to grab non-clicked image */

  $(elem).prop("fallback", tmp_url);

  /*  set the image */
  $(elem).css("background-image", tmp_url);

  /*  add event listener for the click event to the element  and function call-back */
  $(elem).on("click", function() {
    /*  use each again   to change all backgrounds except current one */

    /* use .prop() to grab the custom property */
    $(".slick-dots  li").each(function(u, elem2) {
      $(elem2).css("background-image", $(elem2).prop("fallback"));

    });

    /* use a new variable for the currently clicked one so they don't cause collision */
    var tmp_url2 = "url('" + artifactHover[i % artifactHover.length] + "')";

    $(elem).css("background-image", tmp_url2);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

编辑

在sn-p中我在.prop()的赋值中为每个li元素添加了一个fallback属性，这样当一个元素被点击时，每个li元素都可以正常返回到它的赋值值。

以下是Javascript代码的非注释版本

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'
];



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'
];

$(".slick-dots li").each(function(i, elem) {
  var tmp_url = "url('" + artifacts[i % artifacts.length] + "')";
  $(elem).prop("fallback", tmp_url);
  $(elem).css("background-image", tmp_url);
  $(elem).on("click", function() {
    $(".slick-dots  li").each(function(u, elem2) {
      $(elem2).css("background-image", $(elem2).prop("fallback"));
    });
    var tmp_url2 = "url('" + artifactHover[i % artifactHover.length] + "')";
    $(elem).css("background-image", tmp_url2);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>