鼠标单击3种功能之间的切换

Question

我正在添加一个addEventListener的图片在我的网站上。

目标是，每当用户单击此图片(album-cover-art)时，将调用一个函数(function (event))，，它将在3个函数之间切换。

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

});

以下是我希望在以下三个函数之间切换的三个功能：

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

如何在eventListener中包含这三个函数调用，当点击图片时，它将在它们之间切换？

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

您可以创建一个包含所有选择的数组，然后使用一个索引，选择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>

​

Answer 2

对于所有的选民来说:仅仅因为你不喜欢这种模式并不意味着解决方案是错误的。键入你自己的，更好的答案，让提问者选择他喜欢的那个。此外，如果你拒绝提供的理由(作为评论)的学习目的，为我和提问者。谢谢。

这里是你可能会发现有用的片段：

​

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

使用情况如下

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

 });