Web-Gate
где заказать сайт +38 (093) 209 60 74 где заказать сайт +1 (510) 491 89 19
Пн - Вс: 10 00 - 19 00
Профессиональное продвижение сайтов — поисковая оптимизация,
раскрутка сайта, разработка и создание сайта

Событие jquery radio checked + img src replace

Отзывы ()

Теги:

Рекомендуйте нас:

BigPicture.ru - интервью с владельцем


24.03.2014
Как и сколько можно заработать на блоге - об этом идет речь в интервью с Барышниковым Сергеем.

Страница диагностики для сайта от Google

Страница диагностики для сайта от Google

29.11.2011
Если вы обеспокоены положением дел у вашего сайта относительно поисковой системы Google, то вам обязательно пригодятся так называемая страница "Безопасного просмотра. Страница диагностики" для вашего сайта.
Главная - Блог - Событие jquery radio checked + img src replace
24.04.2014

Нужно было сделать "переключалку" картинки, при выборе определенных radio элемента. Получилось сделать это используя библиотеку jquery-1.10.1.js

Так это работает:

Исходный код HMTL выглядит так:

<img class="imgswitch802" src="http://coffee911.com.ua/assets/cache/images/2014/zernovoy/120x90-Covim-Orocrema.665.jpg" />
<div class="optcena"> <div> <input type="radio" onclick="jQuery.additOpt(this)" checked="checked" id="optcena8020" value="0__145" name="optcena__802" class="addparam"> <label for="optcena8020">1 кг (145 грн/кг)</label></div> <div><input type="radio" onclick="jQuery.additOpt(this)" id="optcena8021" value="1__750" name="optcena__802" class="addparam"> <label for="optcena8021">6 кг (125 грн/кг)</label></div> </div>

А так выглядит исходный javascript код

$rozn = 'http://coffee911.com.ua/assets/cache/images/2014/zernovoy/120x90-Covim-Orocrema.665.jpg';
$opt = 'http://coffee911.com.ua/assets/cache/images/assets/snippets/phpthumb/120x90-noimage-box.665.jpg';
$( "#optcena8020" ).on( "click", function() {
 $('.imgswitch802').attr('src', $rozn);
});
$( "#optcena8021" ).on( "click", function() {
 $('.imgswitch802').attr('src', $opt);
});

Исходник можно посмотреть тут: http://jsfiddle.net/waGdZ/235/

Отзывы (0)


ОтменитьДобавить комментарий