Question

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

目标是每次用户点击此图片（album-cover-art）时，系统都会调用一个函数（function (event)），将在3个函数之间切换

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

});

这些是我想要切换的3个功能：

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

如何在eventListener中包含这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
- 它必须永远在它们之间切换，而不是一个有结束的循环

Answer 1

你可以创建一个包含所有选择的数组，然后使用索引，选择choise并在每次单击时递增最后一次，如果index等于数组长度则返回第一个索引（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代码作为解释示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对于所有的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>

出于演示目的，专辑是数字，但逻辑可以是任何你喜欢的。根据您的需求进行调整。

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

 });

在鼠标单击时切换3个功能

3 个答案: