Переключение между 3 функциями по щелчку мыши

Question

Переключение между 3 функциями по щелчку мыши

1

Я добавляю addEventListener к картинке на моем веб-сайте.

Цель состоит в том, что каждый раз, когда пользователь нажимает эту картинку (album-cover-art), будет вызываться function (event)), которая будет переключаться между 3 функциями

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

});

это 3 функции, которые я хочу переключать между:

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

как включить эти 3 вызова функций в eventListener, что при щелчке изображения он будет переключаться между ними?

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
- Он должен переключаться между ними навсегда, а не цикл, который будет иметь конец

Sami Birnbaum 02 авг. 2017, в 12:43

Источник

Теги:

javascript

addeventlistener

click

4 ответа

0

использовать ниже

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

 });

Sonti Nagarjuna 02 авг. 2017, в 09:17

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

Для демонстрационных целей альбомы - это номера, но логика может быть любой, что вам нравится. Отрегулируйте в соответствии с вашими потребностями.

Marcin Pevik 02 авг. 2017, в 08:48

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

Tolen 02 авг. 2017, в 07:51

Ещё вопросы

Boo Berr'ita · Accepted Answer · 2017-08-02T08-08-00.000Z

вы можете создать массив, контактирующий со всем выбором, затем, используя индекс, выбрать выбор и увеличить его каждый раз, если индекс равен длине массива, а затем вернитесь к первому индексу (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>

@ для тех, чье негативное мнение, почему бы не добавить комментарий, объясняющий вашу неприятность ............. !!!!
Спасибо, это работает и, кажется, является наиболее простым и понятным для моего понимания, хотя я уверен, что другие работали также