Форум

KEMPZOR · #1 (**permalink**) 26.12.2016, 11:32

Здравствуйте уважаемые. Есть код, три input, по нажатию на один из них показывает свой select.

<div class="conteb conteb-hidden" data-okno="4">
<h4>ВЫБОР ВИДА КАРНИЗОВ:</h4>

<div class="cont-radio">
<div class="button-inline"><input class="button-type-pr" checked="checked" id="k-potol" name="vidkarnizov" type="radio" value="1">
   <label for="k-potol">Потолочные</label></div>
<div class="button-inline"><input class="button-type-pr" id="k-nasten" name="vidkarnizov" type="radio" value="2">
   <label for="k-nasten">Настенные</label></div>
</div>
  
<select class="material-select" id="tkani-sel"><option value="1">Алюминиевые</option><option value="2">Пластик</option> </select> 
<select class="material-select" id="mater-sel" style="display:none"><option selected="selected" value="3">Алюминиевые - 1 ряд</option><option value="4">Алюминиевые - 2 ряда</option><option value="5">Деревянные - 1 ряд</option><option value="6">Деревянные - 2 ряда</option> </select>

var radio_btn_on=$('div.conteb[data-okno=4] input[type="radio"]');
radio_btn_on.click(
		function () {
			$("div.conteb[data-okno=4]").find("select").prop("disabled",true).hide();
			var ch_vib_dis=$(this).val();
			console.log('клик'+ch_vib_dis);
			if (ch_vib_dis==1) {
				$("div.conteb[data-okno=4]").find("select#tkani-sel").prop("disabled",false).show();
			} else{
				$("div.conteb[data-okno=4]").find("select#mater-sel").prop("disabled",false).show();
			};
		});

Замысел такой, вместо select'a скрывать div(3 input на 3 div'a). Как не менял код, что-то не получается, может наведёте на мысль.

рони · #2 (**permalink**) 26.12.2016, 12:36

KEMPZOR,

не осилил

KEMPZOR · #3 (**permalink**) 26.12.2016, 16:52

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

KEMPZOR,

не осилил

Сделал вот такой код, работает, только почему-то не активен на той кнопке, где value="0", есть идеи как это обойти не меняя 0?

<div class="button-inline"><input class="button-type-pr" checked="checked" id="r-mini3" name="vidrolshtor" type="radio" value="2">
   <label for="r-mini3"></br>Свободновисящие MINI</label></div>
<div class="button-inline"><input class="button-type-pr" id="r-uni1" name="vidrolshtor" type="radio" value="0">
   <label for="r-uni1"></br>Кассетные UNI-1</label></div>
<div class="button-inline"><input class="button-type-pr" id="r-uni2" name="vidrolshtor" type="radio" value="1">
   <label for="r-uni2"></br>Кассетные UNI-2</label></div>
</div>
  
<div id="skrit1" class="max"><img class="imagecc" src="http://l-c.by/d/402010/d/main_wind_in2.png" alt="" >
  <img class="eck" src="http://l-c.by/d/402010/d/image_mask_horiz.png" alt=""></div>
<div id="skrit2" class="max"><img class="imagecc" src="http://l-c.by/d/402010/d/main_wind_in2.png" alt="" >
  <img class="eck" src="http://l-c.by/d/402010/d/image_mask_horiz.png" alt=""></div>
<div id="skrit3" class="max"><img class="imagecc" src="http://l-c.by/d/402010/d/main_wind_in2.png" alt="" >
  <img class="eck" src="http://l-c.by/d/402010/d/image_mask_horiz.png" alt=""></div>
<div class="blok"><div class="demox"></div></div>

$(document).ready(function(){
		$(".max").hide();
		$("input[name='vidrolshtor']").click(function() {
			var desc = $(this).val();
			$(".max").hide();
			$("div#skrit" + desc).show('fast');
		});
	});

рони · #4 (**permalink**) 26.12.2016, 17:12

KEMPZOR,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function(){
		var max = $(".max").hide(), inp = $("input[name='vidrolshtor']");
		inp.click(function() {
			var indx = inp.index(this);
			max.hide().eq(indx).show('fast');

		}).filter(':checked').click();
	});

  </script>
</head>

<body>
<div class="button-inline"><input class="button-type-pr" checked="checked" id="r-mini3" name="vidrolshtor" type="radio" value="2">
   <label for="r-mini3"></br>Свободновисящие MINI</label></div>
<div class="button-inline"><input class="button-type-pr" id="r-uni1" name="vidrolshtor" type="radio" value="0">
   <label for="r-uni1"></br>Кассетные UNI-1</label></div>
<div class="button-inline"><input class="button-type-pr" id="r-uni2" name="vidrolshtor" type="radio" value="1">
   <label for="r-uni2"></br>Кассетные UNI-2</label></div>


<div id="skrit1" class="max"><img class="imagecc" src="http://l-c.by/d/402010/d/main_wind_in2.png" alt="" >
  <img class="eck" src="http://l-c.by/d/402010/d/image_mask_horiz.png" alt=""></div>
<div id="skrit2" class="max"><img class="imagecc" src="http://l-c.by/d/402010/d/main_wind_in2.png" alt="" >
  <img class="eck" src="http://l-c.by/d/402010/d/image_mask_horiz.png" alt=""></div>
<div id="skrit3" class="max"><img class="imagecc" src="http://l-c.by/d/402010/d/main_wind_in2.png" alt="" >
  <img class="eck" src="http://l-c.by/d/402010/d/image_mask_horiz.png" alt=""></div>
<div class="blok"><div class="demox"></div></div>


</body>
</html>

KEMPZOR · #5 (**permalink**) 26.12.2016, 17:19

Рони, +1, то что доктор прописал.

рони · #6 (**permalink**) 26.12.2016, 17:26

KEMPZOR,
открывашка 301

- смотреть форум поиск открывашка

KEMPZOR · #7 (**permalink**) 03.01.2017, 14:22

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

KEMPZOR,
открывашка 301

- смотреть форум поиск открывашка

Подскажите ещё пожалуйста, как правильно повесить вместе с input ещё и option.

Воспользовался таким кодом для option, вроде работает только не пойму как скрыть те изображения, которые отображаются по нажатию на input.

<select id="selm" name="m">
	<option data-path="http://l-c.by/d/402010/d/rolls_calc_163.jpg" value="1">Овен</option>
	<option data-path="http://l-c.by/d/402010/d/image_mask_vertical.png" value="2">Телец</option>
	<option data-path="http://l-c.by/d/402010/d/image_mask_horizontal.png" value="3">Близнецы</option>
</select>

<div id="selmimg"><img src=""></div>

$(document).ready(function(){
	$('#selm').change(function(){
		$('#selmimg').find('img:first').attr('src', $('#selm option:selected').attr('data-path'));
	});
});

рони · #8 (**permalink**) 03.01.2017, 14:36

KEMPZOR,

$(".max").hide();

добавить в 3 строку?

KEMPZOR · #9 (**permalink**) 03.01.2017, 15:59

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

KEMPZOR,

$(".max").hide();

добавить в 3 строку?

Это понятно, пробовал так, только не скрывается #selmimg если я нажимаю на другой input.

Я так понимаю нужно что то вроде этого ?

$("#selmimg").hide();

И это вставить вот сюда ?

$(function(){
		var max = $(".max_jaluzi").hide(), inp = $("input[name='vidjalusi']");
		inp.click(function() {
			var indx = inp.index(this);
			max.hide().eq(indx).show();
      
  
		}).filter(':checked').click();
	});

рони · #10 (**permalink**) 03.01.2017, 16:06

KEMPZOR,
не понимаю.

Форум

Справочник

Discord чат

Курсы javascript