マウスのクリックで3つの機能を切り替える

Question

私のウェブサイトの画像にaddEventListenerを追加しています。

目標は、これらは私がしたい3つの機能です

document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function (event){ 

}); 

3つの機能を切り替えるれる、ユーザーがこの画像をクリックするたびに（ album-cover-artが）関数は（ function (event)）と呼ばれるということです どのようにこれらの3機能は、画像をクリックしたときに、それは彼らが切り替わりますというのEventListenerに呼び出しを含めることができ

setCurrentAlbum(albumPicasso); 
setCurrentAlbum(albumMarconi); 
setCurrentAlbum(albumGreenDay); 

??：切り替えます

document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function (event){ 
//toggle between the 3 functions below: 
setCurrentAlbum(albumPicasso); 
setCurrentAlbum(albumMarconi); 
setCurrentAlbum(albumGreenDay); 
}); 

注：

• これは私がJavaScriptのみを使用することができませ挑戦であるjQueryの
  • それは、永遠にそれらの間になりますないループを切り替える必要があります終了

インデックスが配列の長さに等しい場合

Answer 1

あなたは、その後、最初のインデックス（0）に戻り、この最後のすべてのクリックを、インデックス、選択一品を使用して、すべての一品をcontaing配列を作成し、インクリメントすることができます

var index= 1; 
var albums = [albumPicasso,albumMarconi,albumGreenDay]; 
document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function(event) { 
    if(index == albums.length) index = 0; 
    setCurrentAlbum(albums[index]); 
    index++; 
}); 

説明サンプルとしてbeelowスニペットを参照してください： すべてdownvotersについては

var albumPicasso = "https://dummyimage.com/300x300/500/f0f", 
 
albumMarconi = "https://dummyimage.com/300x300/550/ff0", 
 
albumGreenDay = "https://dummyimage.com/300x300/555/0ff"; 
 

 
var index= 0; 
 
var albums = [albumPicasso,albumMarconi,albumGreenDay]; 
 
document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function(event) { 
 
    if(index == albums.length) index = 0; 
 
    setCurrentAlbum(albums[index]); 
 
    index++; 
 
}); 
 

 
function setCurrentAlbum(album){ 
 
    document.getElementsByClassName("album-cover-art")[0].style.backgroundImage = "url('"+album+"')"; 
 
}

.album-cover-art { 
 
    background-image : url('https://dummyimage.com/300x300/500/0ff'); 
 
    width:300px; 
 
    height:300px; 
 
}

<div class="album-cover-art"> 
 
    
 
</div>

Answer 2

：あなたはそれが解決策が間違っているというわけではありませんパターンを好きではないという理由だけで。あなた自身の、より良い答えを入力して、彼が好むものを選ぶようにしてください。あなたがdownvotingしている場合は、私と尋問者のために、学習目的の理由（コメントとして）を提供しています。ありがとう。ここで

あなたが役に立つかもしれ抜粋さ：デモ目的のアルバムのために

albumClickCounter = 0; 
 

 
document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function (event){ 
 
    if(window.albumClickCounter % 3 === 0) setCurrentAlbum(albumPicasso); 
 
    if(window.albumClickCounter % 3 === 1) setCurrentAlbum(albumMarconi); 
 
    if(window.albumClickCounter % 3 === 2) setCurrentAlbum(albumGreenDay); 
 
    
 
    window.albumClickCounter++; 
 
}); 
 

 
var setCurrentAlbum = function(album) { alert(album); } 
 
var albumPicasso = 1; 
 
var albumMarconi = 2; 
 
var albumGreenDay = 3;

.album-cover-art { 
 
width: 200px; 
 
height: 200px; 
 
background: green; 
 
}

<div class="album-cover-art"></div>

は数字ですが、ロジックはあなたが好きなことができます。あなたのニーズに合わせて調整してください。

Answer 3

次の3つの変数（albumPicasso、albumMarconiとalbumGreenDay）

var albums = [albumPicasso, albumMarconi, albumGreenDay]; 

を含む配列を定義し、現在

document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function (event){ 
    index = index === albums.length - 1 ? 0 : index++; 
    setCurrentAlbum(albums[index]); 
}); 

Answer 4

使用を表示しているもののアルバムを追跡するために変数を使用することができます以下のようになります

var previouParam=""; 
document.getElementsByClassName("album-cover-art") 
[0].addEventListener("click", function (event){ 
    if(previouParam==""){ 
     setCurrentAlbum("albumPicasso"); 
    }else if(previouParam=="albumPicasso"){ 
     setCurrentAlbum("albumMarconi"); 
     }else{ 
     previouParam=""; 
     setCurrentAlbum("albumGreenDay"); 
    } 

});