Оператор if / else с функцией изменения изображения не работает для нескольких изображений

Question

Я очень новичок в javascript и мне нужна помощь. Моя цель состоит в том, чтобы иметь 3 фотографии до, которые вы нажимаете, чтобы показать фотографию после (веб-сайт по стрижке собак). С одним только фото до / после код работает нормально, но из всех 3 только последний работает правильно. Есть идеи, что я делаю не так? Если / еще заявления все еще очень новы для меня и не уверены, правильно ли я их использую.

<p>Click the dog to <br>show their transformation.</p>

<img id="dog1" onclick="changeImage()" src="images/dog1before.PNG" width="300" >
<br>
<img id="dog2" onclick="changeImage()" src="images/dog2before.PNG" width="300" >
<br>
<img id="dog3" onclick="changeImage()" src="images/dog3before.PNG" width="300" >

<script>
//dog1 before and after
function changeImage() {
  var image = document.getElementById("dog1");
  if (image.src.match("dog1after")) {
    image.src = "images/dog1before.PNG";
  } else {
    image.src = "images/dog1after.PNG";
  }
}

//dog2 before and after
function changeImage() {
  var image = document.getElementById("dog2");
  if (image.src.match("dog2after")) {
    image.src = "images/dog2before.PNG";
  } else {
    image.src = "images/dog2after.PNG";
  }
}    

//dog3 before and after
function changeImage() {
  var image = document.getElementById("dog3");
  if (image.src.match("dog3after")) {
    image.src = "images/dog3before.PNG";
  } else {
    image.src = "images/dog3after.PNG";
  }
}    
</script>

Answer 1

Используйте одну функцию для всех изображений:

<p>Click the dog to <br>show their transformation.</p>

<img id="dog1" onclick="changeImage()" src="images/dog1before.PNG" width="300" >
<br>
<img id="dog2" onclick="changeImage()" src="images/dog2before.PNG" width="300" >
<br>
<img id="dog3" onclick="changeImage()" src="images/dog3before.PNG" width="300" >

<script>
function changeImage(event) {
  var image = document.getElementById(event.target.id);
  if (image.src.match("after")) {
    image.src = "images/" + event.target.id + "before.PNG";
  } else {
    image.src = "images/" + event.target.id + "after.PNG";
  }
}   
</script>

Answer 2

Вот простой подход с использованием набора данных:

<script>
function changeImage(elm) {
    var after = elm.dataset.after;
    var src = elm.getAttribute('src');

    if (after && src !== after) {
        elm.setAttribute('src', after);
    }
}
</script>

<img src='images/dog1before.PNG' data-after='images/dog1after.PNG' onclick='changeImage(this);' />

<img src='images/dog2before.PNG' data-after='images/dog2after.PNG' onclick='changeImage(this);' />

<img src='images/dog3before.PNG' data-after='images/dog3after.PNG' onclick='changeImage(this);' />

Answer 3

Имена функций обратного вызова onclick совпадают, попробуйте изменить их на changeImageA, changeImageB и changeImageC или что-то в этом роде.

Если у вас есть такая возможность, лучше использовать одну функцию, передать аргумент и выполнитьоператор switch или if / else для изменения изображения в зависимости от того, какой из них был нажат.