Изменение изображения с помощью JavaScript - PullRequest
Новая
       47

Изменение изображения с помощью JavaScript

0 голосов
/ 07 февраля 2019

Я новичок в JavaScript.Я хочу знать, что я делаю не так.Я хочу сделать src swap на функцию onclick.После первого клика мое изображение меняется на «закрыть», но с каждым разом оно кажется закрытым.На всякий случай, я не хочу другого решения.Я просто хочу знать, что идет не так в моем сценарии.Спасибо!

function menuOpenClose()
{
    var a = document.getElementById("mobile-menu-icon")

    if (a.src === "icon/menu.svg") {
        a.src = "icon/close.svg";
    } else {
        a.src = "icon/menu.svg";
    }
}
img {
        display: block;
        width: 32px;
        height: 32px;
    }
<div class="menu-icon" onclick="menuOpenClose();">
  <img id="mobile-menu-icon" src="icon/menu.svg">
</div>

Ответы [ 4 ]

0 голосов
/ 07 февраля 2019

Вы можете сделать это двумя способами ( indexOf () или getAttribute () ): 

if (a.src.indexOf("icon/menu.svg") != -1) {

или: 

if (a.getAttribute('src') == "icon/menu.svg") {

Фрагмент: 

function menuOpenClose()
{
    var a = document.getElementById("mobile-menu-icon")

    //if (a.getAttribute('src').indexOf("icon/menu.svg") != -1) {
    if (a.getAttribute('src') == "icon/menu.svg") {
        a.src = "icon/close.svg";
    } else {
        a.src = "icon/menu.svg";
    }
    console.log(a.src);
}
<div class="menu-icon" onclick="menuOpenClose();">
    <img id="mobile-menu-icon" src="icon/menu.svg">
</div>
0 голосов
/ 07 февраля 2019

Ваше условие в операторе if должно быть таким, как показано ниже 

   if (a.src === "icon/menu.svg") {
0 голосов
/ 07 февраля 2019

Прежде всего измените = на === это другое:

a.src === "icon/menu.svg" это правильно

Во-вторых, как вы видите, вы никогда не измените свое изображение, потому что ваше состояние не можетЛови.

это ответ с консоли: 

@>src https://stacksnippets.net/icon/menu.svg

Вы всегда делаете else

        function menuOpenClose() {
            var a = document.getElementById("mobile-menu-icon")

            console.log(`@>src`,a.src)

            if (a.src === "icon/menu.svg") {
                a.src = "icon/close.svg";
            } else {
                a.src = "icon/menu.svg";
            }
        }
<div class="menu-icon" onclick="menuOpenClose();">
    <img id="mobile-menu-icon" src="icon/menu.svg">
</div>
0 голосов
/ 07 февраля 2019

Вы используете оператор присваивания в if statement вместо оператора сравнения.

Измените это: 

if (a.src = "icon/menu.svg")

На это: 

if (a.src === "icon/menu.svg")

Проверьте и запустите следующий Фрагмент кода для практического примера вышеупомянутого подхода: 

/* CSS */
img {display: block;width: 32px;height: 32px;}
<!-- JavaScript -->
<script>
function menuOpenClose(){
    var a = document.getElementById("mobile-menu-icon")

    if (a.src === "https://picsum.photos/50/50?image=0") {
        a.src = "https://picsum.photos/50/50?image=1";
    } else {
        a.src = "https://picsum.photos/50/50?image=0";
    }
}
</script>

<!-- HTML -->
<div class="menu-icon" onclick="menuOpenClose();">
  <img id="mobile-menu-icon" src="https://picsum.photos/50/50?image=0">
</div>
...