Изменение стиля при событии
Всем привет! Народ, как на JS или jQuery сделать рамку у картинки, если к этой картинке привязан RadioButton?
Вот страница http://hookah-dream.ru/katalog/product/view/20/202.html надо сделать так, чтобы при клике на картинку, т.е. когда radiobutton выбран у соответствующей картинки - у неё бы появлялся border. Сам radiobutton я скрыл - для красоты, но вот как сделать выделение пока не знаю. Помогите пожалуйста. пока есть только вот что: <span id='block_attr_sel_1'> <!--Тут идёт вывод переключателя и картинки--> <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id15" value="5" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id15"><span class='radio_attr_label'><img src='http://hookah-dream.ru/components/com_jshopping/files/img_attributes/thumb____________________________HG-18______________.jpg' alt='' /> Синяя</span></label></span> <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id16" value="6" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id16"> <span class='radio_attr_label'><img src='http://hookah-dream.ru/components/com_jshopping/files/img_attributes/thumb____________________________HG-18______________1.jpg' alt='' /> Белая </span> </label> </span> <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id17" value="7" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id17"> <span class='radio_attr_label'> <img src='http://hookah-dream.ru/components/com_jshopping/files/img_attributes/thumb____________________________HG-18________________________.jpg' alt='' /> Коричневая </span> </label> </span> <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id18" value="8" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id18"> <span class='radio_attr_label'><img src='http://hookah-dream.ru/components/com_jshopping/files/img_attributes/thumb____________________________HG-18________________.jpg' alt='' /> Черная</span> </label> </span> </span> Код: $(document).on("change", "input[type=radio]", function(e){ if ($(this).prop("checked")) { $(".radio_attr_label img").css("border","2px solid #fce;"); } else { $(".radio_attr_label img").css("border","0px solid #fce;"); } }); Но веб инспектор ругается, пишет $(...).on is not a function Помогите знающие люди |
Цитата:
замените все $ на которые консоль ругается на jQuery но нафиг функция когда достаточно css <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> input:checked + label img{ border: 2px solid #fce; } </style> </head> <body> <span id='block_attr_sel_1'> <!--Тут идёт вывод переключателя и картинки--> <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id15" value="5" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id15"><span class='radio_attr_label'><img src='http://hookah-dream.ru/components/com_jshopping/files/img_attributes/thumb____________________________HG-18______________.jpg' alt='' /> Синяя</span></label></span> <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id16" value="6" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id16"> <span class='radio_attr_label'><img src='http://hookah-dream.ru/components/com_jshopping/files/img_attributes/thumb____________________________HG-18______________1.jpg' alt='' /> Белая </span> </label> </span> <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id17" value="7" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id17"> <span class='radio_attr_label'> <img src='http://hookah-dream.ru/components/com_jshopping/files/img_attributes/thumb____________________________HG-18________________________.jpg' alt='' /> Коричневая </span> </label> </span> <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id18" value="8" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id18"> <span class='radio_attr_label'><img src='http://hookah-dream.ru/components/com_jshopping/files/img_attributes/thumb____________________________HG-18________________.jpg' alt='' /> Черная</span> </label> </span> </span> </body> </html> |
рони Спасибо огромное !!! как раз то, что нужно! А я уж мозг сломал как бы JS функцию написать которая это делает )))
|
Часовой пояс GMT +3, время: 20:05. |