Как сопоставить индекс элемента с индексом массива?

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

    }); 

Таким образом, когда пользователь нажимает на элемент списка, он тянет соответствующее изображение из массива на основе от элемента, которая была нажата.

Если есть больше элементов списка, чем есть изображения, тогда оно только начинается и начинается с начала. Моя проблема соответствует текущему выбранному элементу списка с соответствующим изображением наведения. Используя индекс() для наведения артефакта, если я выбираю элемент списка, который больше, чем количество в массиве изображений, он помещает пустое изображение вместо перезапуска с начала списка.

Answer 1

Все, что вам нужно использовать это для того, чтобы начать с начала.

artifactHover[index%artifactHover.length] 

Answer 2

Не уверен, что проблема с вашим скриптом, но theres более простой способ написать его.

Просто используйте 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>

EDIT

В фрагменте я добавил в .prop() назначение fallback ty для каждого элемента li, так что при щелчке элемента каждый элемент 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>