как изменить цвет изображения при клике (активный) и как вернуть его обратно при нажатии другого изображения - PullRequest
Новая
       6

как изменить цвет изображения при клике (активный) и как вернуть его обратно при нажатии другого изображения

0 голосов
/ 25 июня 2018

У меня есть 2 папки в папке с изображениями. Две папки - это enableState и activeState. В папке enableState находятся белые изображения (всего 8 изображений), а в другой папке оранжевые изображения (всего 8 изображений).

У меня есть sideNav, появляющийся на экране. Все белые изображения будут показаны после загрузки страницы. когда пользователь нажимает на первое изображение (белое), оно становится активным и превращается в оранжевый.

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

.

В этом примере я сделал только 3 изображения.

Вот мой HTML-код: 

<ul id="slide-out" class="col s2 m2 l2 sidenav sideNavBar">
<li><img src="/images/baseTemplate/enableState/gsymbol.svg" alt="G-Symbol" class="gSymbol_enable active"/>
</li>
<li><img src="/images/baseTemplate/enableState/commune.svg" alt="commune" class="commune_enable"/>
</li>
<li><img src="/images/baseTemplate/enableState/couplerhub.svg" alt="couplerhub" class="couplerHub_enable"/>
</li>
<ul>

Вот мой код JS: 

$("img").click(function() {
      alert("image");
      if ($(this).hasClass("gSymbol_enable")) {
      this.src = this.src.replace("/images/baseTemplate/enableState","/images/baseTemplate/activeState");
      } 
      else if($(this).hasClass("commune_enable")){
      this.src = this.src.replace("/images/baseTemplate/enableState","/images/baseTemplate/activeState");
      }
});

Ответы [ 2 ]

0 голосов
/ 27 июня 2018 
Here is my HTML code. I have renamed images as _on for activeState and _off for enableState. For example gsymbol.svg as (gsymbol_on.svg, gsymbol_off.svg).

<ul id="slide-out" class="col s2 m2 l2 sidenav sideNavBar">
<li><img src="/images/baseTemplate/enableState/gsymbol_off.svg" alt="G-Symbol" class="gSymbol_enable active"/>
</li>
<li><img src="/images/baseTemplate/enableState/commune_off.svg" alt="commune" class="commune_enable"/>
</li>
<li><img src="/images/baseTemplate/enableState/couplerhub_off.svg" alt="couplerhub" class="couplerHub_enable"/>
</li>
<ul>

Here is my JS code :

$(" .sidenav > li > img").click(function () {
  var allImg = $('.sidenav > li > img')
  $('.sidenav').children('li').children('img').map(function () {
  var allImgs = $(this).attr('src');
  allImgs = allImgs.replace("activeState", "enableState");
  allImgs = allImgs.replace("on", "off");
  $(this).attr('src', allImgs)
  }).get();

  var imgSrc = $(this).attr('src');
  imgSrc = imgSrc.replace("off", "on");
  imgSrc = imgSrc.replace("enableState", "activeState");
  $(this).attr('src', imgSrc);
});

This code makes the clicked image as active(orange) and rests as disabled(white).
0 голосов
/ 25 июня 2018 

$("img").click(function() {

var allImg = $('img')
  

   $(allImg).attr('src','https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg');    
      
      $(this).attr('src','https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg');
     
});
li img { max-width:80px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slide-out" class="col s2 m2 l2 sidenav sideNavBar">
<li><img src="https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg" alt="G-Symbol" class="gSymbol_enable active"/>
</li>
<li><img src="https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg" alt="commune" class="commune_enable"/>
</li>
<li><img src="https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg" alt="couplerhub" class="couplerHub_enable"/>
</li>
<ul>

Эй, можете проверить, соответствует ли это вашим требованиям.Пусть знают.

...