JavaScript Swap Image onClick (несколько экземпляров одного и того же изображения на странице)

avatar
Benjamin Bennett
7 апреля 2018 в 22:31
62
1
0

Попытка получить изображение для замены при нажатии каждый раз, когда я помещаю его на страницу (шесть в настоящее время). Я полагаю, что использую data-id="" в, но не знаю, как настроить javascript, чтобы выделить каждый идентификатор данных для каждого тега img, чтобы он был уникальным. Спасибо за помощь.

    <img id="like" src="img/icon-like.svg" onclick="swapImage();" width="16px">


    <script language="JavaScript" type="text/JavaScript">
    var q=0; function swapImage(){ if(q==0){ document.getElementById("like").setAttribute('src','img/icon-liked.svg'); q++; }
    else{ document.getElementById("like").setAttribute('src','img/icon-like.svg'); q--; } }
    </script>
Источник

Ответы (1)

avatar
PolymorphismPrince
7 апреля 2018 в 22:42
0

Попробуйте следующее:

<img id="like" src="img/icon-like.svg" onclick="swapImage();" width="16px">


    <script language="JavaScript" type="text/JavaScript">

var q=0; 
function swapImage(){ 
    document.querySelector("#like").setAttribute('src','img/icon-liked'+ q + '.svg');
  q++;
}
    </script>

Теперь переименуйте каждое из ваших отдельных изображений в "icon-liked0", "icon-liked1", и оно назначит каждому из них.

Внимание: шесть изображений будут работать только один раз.

Если вы хотите, чтобы он выполнялся в цикле, сделайте следующее:

<img id="like" src="img/icon-like.svg" onclick="swapImage();" width="16px">


    <script language="JavaScript" type="text/JavaScript">

var q=0; 
function swapImage(){ 
    document.querySelector("#like").setAttribute('src','img/icon-liked'+ q + '.svg');
  q++;
  if (q == 6) {
    q = 0;
  }
}
    </script>
Benjamin Bennett
8 апреля 2018 в 13:45
0

Пробовал обе версии. Включается при первом использовании. (было бы полезно вкл/выкл) Все остальные вообще не работают. Они содержатся в модальных окнах. Вот ссылка (мне нужно было предоставить ее раньше, чтобы у вас был лучший контекст. Извините.) cnnctd.co/example/landingpage-drk.html

PolymorphismPrince
8 апреля 2018 в 21:55
0

Итак, вам нужен только один <div> переключатель между шестью изображениями?

Benjamin Bennett
8 апреля 2018 в 23:40
0

Я просто хочу, чтобы при открытии каждого модального окна (сообщения) можно было нажать сердце (красное), а затем выключить (серое). Первый модал (пост) работает корректно, остальные игнорируются.