Имя: Пароль:
IT
Веб-мастеринг
При клике на кнопке - поменять картинку на другую
0 Маленький Вопросик
 
06.06.17
08:33
Товарищи, прошу подсказать, как при клике на кнопку - заменить определенную картинку.

Используя jquery
1 Asmody
 
06.06.17
08:37
$('#button').on('click', function(){$('#image').attr('src',url_of_another_image)})
2 Маленький Вопросик
 
06.06.17
11:10
(1) спасибо!

как сделать, если забить параметрически:


<img id='#img".id."' src='img001.jpg' />
3 Маленький Вопросик
 
06.06.17
11:12
соответственно кнопка имеет

<button id='#img".id."' />
4 Андрюха
 
06.06.17
11:39
5 Маленький Вопросик
 
06.06.17
11:41
(4) смысл в том, что у меня много картинок и много кнопок. и каждая кнопка отвечает только за смену 1 картинки
6 Андрюха
 
06.06.17
11:49
Если у кнопки id="button1", то $("#button1")
7 Маленький Вопросик
 
06.06.17
11:51
можно ли в самой кнопке прописать функцию jquery? и как это сделать?
8 Маленький Вопросик
 
06.06.17
11:51
кнопок может быть много. не на каждую же писать свою процедуру
9 Андрюха
 
06.06.17
11:54
Если изображения разные, то придется напистаь для каждой.
10 Маленький Вопросик
 
06.06.17
12:05
$("#my_image").bind("click", function() {
      $("#my_image").attr("src","second.jpg");
});

вот это можно написать в теге <button> а не в отдельном блоке?
11 Asmody
 
06.06.17
12:12
(10)
допустим, такой 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)}
})
12 arsik
 
гуру
06.06.17
12:14
reactjs вам в помощь.
13 Asmody
 
06.06.17
12:15
лучше даже такой селектор написать:

$('button[data-img-src]')
14 Asmody
 
06.06.17
12:15
(12) react замороченный. vue гораздо приятнее и чище.
15 Маленький Вопросик
 
06.06.17
12:34
var $bt=$(this) - вот эта штука поймет какую я кнопку нажал?
16 Маленький Вопросик
 
06.06.17
12:36
вот у меня такой код

соответственно, 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>
....
17 Asmody
 
06.06.17
12:43
(15) внутри коллбека события this - это элемент, от которого оно пришло. Ты можешь в теги data-... кнопок напихать данные, какие тебе надо и анализировать в обработчике. Причем, через .data() можно как читать, так и писать данные.
18 Маленький Вопросик
 
06.06.17
12:46
(17) могу в любой тег my-src-change=... закинуть название картинки - у кого требуется сменить src?

спасибо. направление понял
19 Asmody
 
06.06.17
13:20
(18) лучше использовать атрибуты data-... Например, data-my-src. Тогда с ними можно работать через метод .data(): .data('my-src')
20 Маленький Вопросик
 
06.06.17
13:26
спасибо!
Пользователь не знает, чего он хочет, пока не увидит то, что он получил. Эдвард Йодан