要素インデックスと配列インデックスの一致方法は？

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> 

ホバー/選択された色の画像が「選択」されています。ユーザーがリスト項目をクリックしたときに

が

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

    }); 

だから、それがクリックされた要素をオフに基づいて、アレイから適切なイメージを引き出し：

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です。

画像があるよりも多くのリスト項目がある場合は、最初からやり直して、最初からやり直します。私の問題は、現在選択されているリストアイテムを適切なホバーイメージと一致させることです。アーティファクトホバーにindex（）を使用すると、イメージの配列の量よりも大きいリスト項目を選択すると、リストの先頭から再開する代わりに、空のイメージが配置されます。

Answer 1

のコメント以外のバージョンです。

artifactHover[index%artifactHover.length] 

Answer 2

スクリプトの問題点はわかりませんが、簡単な方法で記述することはできません。

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

に渡す前に、URL文字列を構築するために、インデックスと要素と一時変数を取得するためのjQuery foreachを使用スニペットでは、私は.prop()の割り当てをfallbackの適切な各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>