Как написать 1 функцию для 4 картинок?

Question

[Eric Grizzzzlie]

Имеются 4 фотографии которые при клике должны сменятся и слова при клике возвращать первую (или следующую а потом снова первую), функцию я написал но при клике на 2 3 4 картинку меняется только первая.
Знаю что 4 функции создавать - это глупость.

<a href="#"><img   id="image" onclick="changeImage()" src="img/like.png"></a>

function changeImage() {
	var image = document.getElementById('image');

	if(image.src.match("img/like.png")) {
		image.src = "img/like-full.png";
	}
	else {
		image.src = "img/like.png";
	}
}

и так на 4 картинках.
Как сделать правильно ?

Comments

[Александр]

Слушай click по document, если e.target соответствует нужному изображению, то что то с ним делай.

Answer 1

[Игорь]

<a href="#"><img   id="image" onclick="changeImage(this)" src="img/like.png"></a>

function changeImage(elem) {...
Дальше работаешь с elem

Answer 2

[Дмитрий]

Передавайте в функцию id уникальный для каждой картинки или используйте класс

Answer 3

[Анатолий Медведев]

Примерно так, возможно где то ошибся, не проверял.

<img class="image"  src="img/like.png">
<img class="image"  src="img/like.png">
<img class="image"  src="img/like.png">
<img class="image"  src="img/like.png">

var images = document.querySelectorAll('.image');
images.forEach(function(image) {
  image.addEventListener('click', function(e) {
   if(e.target.src.match("img/like.png")) {
    e.target.src = "img/like-full.png";
  }
  else {
    e.target.src = "img/like.png";
  }
 })
})

Comments

[Юрий Костин]

Можно даже, наверное так:

const images = document.querySelectorAll('.image');
images.forEach(img => {
    img.src = img.src.match('img/like.png') ? 'img/like-full.png' : 'img/like.png';
});

Answer 4

[Exploding]

Подумал я и вот такой вот, самый простой, проще некуда наверно уже, круговой слайдер придумал. Может как-то еще упростить? Хз, у меня уже не получается))

<style>
			.one-line-slider > img{
				max-width: 320px;
				height: auto;
				display:none;
			}
			
			.one-line-slider > img:first-child{
				display:block;
			}
		</style>
		<script>
			$(document).ready(function(){
	
				$(".one-line-slider img").on("click", function(e){
					$(this).hide().next("img").show();
				});		
				$(".one-line-slider img:last").on("click", function(e){
					$(this).hide().siblings("img:first").show();
				});			
			});
		</script>
		<div class="one-line-slider">
			<img src='slides/1.jpg'>
			<img src='slides/2.jpg'>
			<img src='slides/3.jpg'>
			<img src='slides/4.jpg'>
		</div>

UPD: придумал как упростить js

$(".one-line-slider img").on("click", function(e){
		if($(this).index() == $(".one-line-slider img").length-1)
			$(this).hide().siblings("img:first").show();
		else
			$(this).hide().next("img").show();
	});