Форум

fenix_63 · #1 (**permalink**) 04.12.2015, 13:20

Всем привет! Народ, как на 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

Помогите знающие люди

рони · #2 (**permalink**) 04.12.2015, 14:47

Сообщение от fenix_63

Но веб инспектор ругается, пишет $(...).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>

fenix_63 · #3 (**permalink**) 04.12.2015, 15:07

рони Спасибо огромное !!! как раз то, что нужно! А я уж мозг сломал как бы JS функцию написать которая это делает )))

Форум

Справочник

Discord чат

Курсы javascript