При клике на кнопке - поменять картинку на другую #798766

Товарищи, прошу подсказать, как при клике на кнопку - заменить определенную картинку. Используя jquery

$('#button').on('click', function{$('#image').attr('src',url_of_another_image)})

спасибо! как сделать, если забить параметрически: <img id='#img".id."' src='img001.jpg' />

соответственно кнопка имеет <button id='#img".id."' />

смысл в том, что у меня много картинок и много кнопок. и каждая кнопка отвечает только за смену 1 картинки

Если у кнопки id="button1", то $("#button1")

можно ли в самой кнопке прописать функцию jquery? и как это сделать?

кнопок может быть много. не на каждую же писать свою процедуру

Если изображения разные, то придется напистаь для каждой.

$("#my_image").bind("click", function {       $("#my_image").attr("src","second.jpg"); }); вот это можно написать в теге <button> а не в отдельном блоке?

допустим, такой html <img id="image" src="url0"> <button data-img-src="url1">Bt1</button> <button data-img-src="url2">Bt2</button> <button data-img-src="url3">Bt3</button> <button data-img-src="url4">Bt4</button> <button data-img-src="url5">Bt5</button> $('button').on('click', function{ var $bt=$(this); if(var url=$bt.data('img-src')){$('#image').attr('src', url)} })

reactjs вам в помощь.

лучше даже такой селектор написать: $('button[data-img-src]')

react замороченный. vue гораздо приятнее и чище.

var $bt=$(this) - вот эта штука поймет какую я кнопку нажал?

вот у меня такой код соответственно, img и button создаются циклом php <img id="image11" src="url1"> <img id="image12" src="url2"> ... <button data-img-src="url1">Bt1</button> <button data-img-src="url2">Bt2</button> ....

внутри коллбека события this - это элемент, от которого оно пришло. Ты можешь в теги data-... кнопок напихать данные, какие тебе надо и анализировать в обработчике. Причем, через .data можно как читать, так и писать данные.

могу в любой тег my-src-change=... закинуть название картинки - у кого требуется сменить src? спасибо. направление понял

лучше использовать атрибуты data-... Например, data-my-src. Тогда с ними можно работать через метод .data: .data('my-src')

спасибо!