Смена картинки при клике

242

13 декабря 2017, 21:50

Как написать на Jquery функцию, которая будет при нажатии на иконку плюс (изображение plus.gif) будет менять его на минус (изображение minus.gif) и наоборот? То есть при нажатии на минус обратно возвращается изображению плюса.

<div id="main">
    <li><img id="icon" src="img/plus.gif" onclick="imgsrc(this)" >Россия
        <ul>
            <div id="RusOne"><li>Пейзажи</li></div>
        </ul>
    </li>
</div>

Answer 1

Ответ из области "никогда так не делайте, хоть это и работает" :D

$("#icon").click(function(){  
    $(this).attr('src', $(this).attr('src').split('').reverse().join("")); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="/img/plus.gif?fig.sunim/gmi/" id="icon">

отсутствие толкового реверса строки напрочь убило всю идею :(

зы: ответ шутка, если вдруг кто не поймет

Answer 2

function imgsrc(img) {
  if ($(img).attr("src") == "img/plus.gif")
    $(img).attr("src", "img/minus.gif");
  else
    $(img).attr("src", "img/plus.gif");
}

Answer 3

Почему бы не назначить стили в CSS и потом через Jquery менять класс?

$("#main").on('click', '#icon' ,function(){  
    $(this).toggleClass('minus'); 
});

#icon { 
    width: 10px; 
    height: 20px; 
    background: url(https://i.stack.imgur.com/iTWRf.png) 0 0 no-repeat; 
    display: inline-block; 
    background-size: 20px;     
} 
 
/* не обязательное указание*/ 
#icon.plus { 
  background-position: 0px 0;  
} 
 
#icon.plus.minus { 
  background-position: -10px 0; 
} 
 
 
 
 
li { 
  list-style: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="main"> 
    <li> 
      <span id="icon" class="plus"></span> 
      <!-- 
    <img id="icon" src="img/plus.gif" onclick="imgsrc(this)" > 
    --> 
    Россия 
        <ul> 
            <div id="RusOne"><li>Пейзажи</li></div> 
        </ul> 
    </li> 
</div>

toggleClass - Добавляет или удаляет заданный класс(ы) по принципу переключателя (добавляет, если элемент не содержит класса, и удаляет, если класс есть)