Question

我将一系列列表项应用于图像数组中的背景图像。

我创建了一系列图像＆＃39;工件＆＃39; ：

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>

有一个＆＃39;被选中＆＃39;悬停/选定颜色的图像集。

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] + '")';
    });

  });

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

如果列表项比图像多，那么它将重新开始并从头开始。我的问题是将当前选定的列表项与适当的悬停图像进行匹配。通过对artifact-hover使用index（），如果我选择的列表项大于图像数组中的数量，则会放入一个空白图像，而不是从列表的开头重新开始。

Answer 1

你需要的只是使用它，以便从头开始。

artifactHover[index%artifactHover.length]

Answer 2

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

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

＆＃13;

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);
  });
});

＆＃13;

<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>

＆＃13;

编辑

在我为每个.prop()元素的fallback属性的li分配添加的代码段中，以便在单击某个元素时，每个li元素都可以正确返回其指定值。

以下是Javascript代码的非评论版

＆＃13;

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);
  });
});

＆＃13;

<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>

＆＃13;

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

2 个答案: