鼠標點擊3個功能之間的切換

我在我的網站上添加了一張addEventListener。鼠標點擊3個功能之間的切換

的目標是，每次用戶點擊這個畫面（album-cover-art）的功能將被調用（function (event)），這將3個功能

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

});

這些之間進行切換是3個功能我想切換之間：

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

怎麼能包括在事件監聽被點擊照片時，將在兩者之間切換這3個函數調用？

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

注：

在這裏，我只能使用JavaScript NOT JQuery的一個挑戰
- 它必須永遠在它們之間進行切換，而不是一個環，將有end

來源

2017-08-02 Sami Birnbaum

您可以創建一個數組方含所有的choise然後，使用索引，選擇的choise並增加這最後的每一次點擊，如果指數等於數組的長度，然後返回到第一個索引（0），

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片段作爲解釋例子：

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>

來源

2017-08-02 10:46:18

@對於那些downvoting，爲什麼不添加註釋來解釋你的不愉快............. !!!! –

謝謝，這工作，似乎是我的理解最簡單明瞭，即使我確定其他人也工作以及 –

@samibirnbaum我很高興:) –

-1

對於所有downvoters：只是因爲你不喜歡，這並不意味着該解決方案是錯誤的模式。輸入你自己的，更好的答案，讓提問者選擇他喜歡的。此外，如果你正在降低供應的理由（作爲評論）的學習目的，爲我和提問者。謝謝。

這裏是你可能會發現有用的片段：

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>

爲了演示專輯是數字，但邏輯可以是任何你喜歡的。調整以適應您的需求。

來源

2017-08-02 10:47:14

-1

你可以定義包含三個變量（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]); 
});

來源

2017-08-02 10:48:41 Tolen

-1

使用如下

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

});

來源

2017-08-02 11:05:19

鼠標點擊3個功能之間的切換

回答

相關問題