Скрыть/показать div по клику input.
Здравствуйте уважаемые. Есть код, три 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). Как не менял код, что-то не получается, может наведёте на мысль. |
KEMPZOR,
:-? не осилил |
Цитата:
<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');
});
});
|
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>
|
Рони, +1, то что доктор прописал.
|
KEMPZOR,
открывашка 301 :lol: - смотреть форум поиск открывашка |
Цитата:
Воспользовался таким кодом для 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'));
});
});
|
KEMPZOR,
$(".max").hide();
добавить в 3 строку? |
Цитата:
Я так понимаю нужно что то вроде этого ?
$("#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();
});
|
KEMPZOR,
не понимаю. |
| Часовой пояс GMT +3, время: 02:21. |