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

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

Отзывы ()

Теги:

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

Создать сайт самому - краткий обзор для начинающих!

Создать сайт самому - краткий обзор для начинающих!

13.04.2015
Этот вопрос задают тысячи людей по всему миру каждый день, и ответить на него можно по разному. Постараемся вас не запутать и прояснить этот процесс!

Динамика курса Гривна ЦБ РФ, руб. за 10 грн


12.07.2011
Отчего скачут цены на различных биржах продажи ссылок, можно узнать из этого графика
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)


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