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

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

Отзывы ()

Теги:

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

Как обойти Adblock


26.03.2014
Столкнулся с проблемой - собственная реклама сайта, т.е. баннера которые ведут на внутренние разделы клиентского сайта были заблокированы браузерной надстройкой Adblock

Страница диагностики для сайта от 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)


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