Cмена div'ов в зависимости от кнопки radio
Подскажите, у меня есть выпадающий список, и в нем выбираются кнопки radio, как сделать что в зависимости от выбранного менялся div c нужным id? https://jsfiddle.net/d1mka21/673bb94L/
Я делал кое как, под две кнопки, а если у меня их больше двух, что-то никак не получается(((
$(document).ready(function(){
$('input[name=sw]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one'){
$('#one').show();
$('#two').hide();
}
else{
$('#one').hide();
$('#two').show();
}
});
});
Спасибо! |
Цитата:
Нужно будет: - Спрятать все однотипные - Открыть нужный |
ksa,
а не подскажите, есть где то образец кода js такого плана?! |
Цитата:
Проверь, есть там чего? http://javascript.ru/forum/search.php?searchid=58003 |
ksa,
ахха))) спасибо буду шуршать в темах))) надеюсь, что-то да найду)) |
d1mka21,
Открывашка 212 input type=radio |
рони,
Попробовал такую "открывашку", но руки у меня вообще не от туда, походу)) т.к. js не сильно силен((
<div id="one" class="row">
<div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
<div id="vehicle-nav-container">
<div id="length" class="wrapper-dropdown-3" tabindex="1">
<span>Длина</span>
<ul class="vehicle-nav">
<input id="1str1metr" type="radio" value="one" name="length" checked="checked">
<label for="1str1metr">
<li class="active">
<a href="#vehicle-1"><i class="icon-envelope icon-large"></i>1 метр</a>
</li>
</label>
<input id="1str2metra" type="radio" value="one" name="length">
<label for="1str2metra">
<li class="active">
<a href="#vehicle-2"><i class="icon-envelope icon-large"></i>2 метра</a>
</li>
</label>
<input id="1str3metra" type="radio" value="one" name="length">
<label for="1str2metra">
<li class="active">
<a href="#vehicle-3"><i class="icon-envelope icon-large"></i>3 метра</a>
</li>
</label>
</ul>
</div>
</div>
</div>
<!-- Vehicle 1str end -->
<!-- Vehicle 1 data start -->
<div id="Vehicle">
<div class="vehicle-data" id="vehicle-1" font face="Raleway-ExtraLight" style="display:none">
<div class="col-md-6 wow fadeIn" data-wow-offset="100">
<div class="vehicle-img">
<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title=""><img class="img-responsive" src="http://noviyhudozhnik.ru/img/metal_shelf/1str/1str1metr.JPG" alt="Vehicle"></a>
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-offset="200">
<div class="vehicle-price">20000 ₽ <span class="info"> <font face="Raleway-ExtraLight">стоимость</font></span></div>
<table class="table vehicle-features">
<tr>
<td>Масса</td>
<td>130,4 кг</td>
</tr>
<!-- <tr>
<td>Doors</td>
<td>4</td>
</tr> -->
</table>
<a href="#teaser" class="reserve-button scroll-to"><span class="glyphicon glyphicon-calendar"></span> Оформить заказ</a>
</div>
</div>
<!-- Vehicle 1 data end -->
window.onload = function() {
var divs = document.querySelectorAll('.active + div'),
inp = document.querySelectorAll('[name="length"]'),
fn = function(input) {
input.onclick = function() {
Array.prototype.forEach.call(divs, function(div, i) {
div.style.display = inp[i].checked ? "block" : "none"
})
}
};
Array.prototype.forEach.call(inp, fn);
}
вроде бы класс, и name кнопки поменял на свои, но все равно не работает((( Я поставил Вашу Открывашка 234 фильтрация div по id.htm, но она тоже стала не до конца корректно, где-то я напортачил видимо((( Гляньте пожалуйста, http://noviyhudozhnik.ru/ |
d1mka21,
Цитата:
|
рони,
да в этих двух строчках я и меняю название class'ов, но все равно не работает, я уже и пробовал название классов ставить такие же, как у Вас в том примере, только вместо тега "p" ставил div, но и с "р" пробовал, но все равно не срабатывает((( |
d1mka21,
что открыть закрыть хотите какие элементы, хоть строку тут напишите |
рони,
у меня получилось сделать, то что нужно с помощью открыть закрыть открывашка на js:dance: :dance: но только теперь когда я из выпадающего списка выбираю длину, то название строчки не переноситься в название списка, и список не закрывается автоматически при нажатие на тег "li" Вот весь код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Пример</title>
<meta name="robots" content="noindex,nofollow">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/animate.css" rel="stylesheet">
<!-- Google Font Lato -->
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="fonts/Raleway-ExtraLight.ttf" type="text/css">
<!-- Main Styles -->
<link href="css/styles.css" rel="stylesheet">
<link rel="shortcut icon" href="img/ico/favicon.png">
</head>
<body id="top" data-spy="scroll" data-target=".navbar" data-offset="260">
<!-- Vehicles start -->
<form action="#">
<section id="vehicles" class="container">
<div class="col-md-12">
<h2 class="title wow fadeInDown" data-wow-offset="200">Выбор стеллажа<span class="subtitle"></span></h2>
<div id="radio">
<div class="radio_pos">
<input checked="checked" class="radio" id="radio-1" name="sw" type="radio" value="one">
<label style="" for="radio-1">Односторонний</label>
<br><br>
<input style="" class="radio" id="radio-2" name="sw" type="radio">
<label style="" for="radio-2">Двухсторонний</label>
</div>
</div>
</div>
<!-- Vehicle 1str start -->
<div id="one" class="row">
<div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
<div id="vehicle-nav-container">
<div id="length" class="wrapper-dropdown-3" tabindex="1">
<span>Длина</span>
<ul class="vehicle-nav">
<input id="1str1metr" type="radio" class="lenght" value="one" name="length" checked="checked">
<label for="1str1metr">
<li class="active">
<a onclick="_click(1); return false;"><i class="icon-envelope icon-large"></i>1 метр</a>
</li>
</label>
<input id="1str2metra" type="radio" class="lenght" value="one" name="length">
<label for="1str2metra">
<li class="active">
<a onclick="_click(2); return false;"><i class="icon-envelope icon-large"></i>2 метра</a>
</li>
</label>
<input id="1str3metra" type="radio" class="lenght" value="one" name="length">
<label for="1str2metra">
<li class="active">
<a onclick="_click(3); return false;"><i class="icon-envelope icon-large"></i>3 метра</a>
</li>
</label>
</ul>
</div>
</div>
</div>
<!-- Vehicle 1str end -->
<script type="text/javascript">
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.vehicle-nav > .op input[type="radio"] + label li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
$('.wrapper-dropdown-3').removeClass('active');
obj.index = opt.index();
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#length') );
var dd = new DropDown( $('#metr') );
$(document).click(function() {
// all dropdowns
$('<div class="wrapper-dropdown-3"></div>').removeClass('active');
});
});
$(document).ready(function(){
$('input[name=sw]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one'){
$('#one').show();
$('#two').hide();
}
else{
$('#one').hide();
$('#two').show();
}
});
});
var _click = function () {
var b = 1;
return function (c) {
var a = document.getElementById("vehicle-" + b);
c == b && (a.style.display = "none" == a.style.display ? "" : "none");
c != b && (a.style.display = "none", a = document.getElementById("vehicle-" + c), a.style.display = "", b = c)
}
}();
window.onload = function() {
_click(1)
}
</script>
Сам список выпадающий строки 46-66, а код js для него 02-41. |
d1mka21,
пас ... либо попробуйте локализовать ... html 10-20 строк 3 радио 3 элемента |
Цитата:
|
открывашка 237 radio jquery
d1mka21,
это вот как-то так :)
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var a = $(".lenght"),
c = $(".vehicle");
a.each(function(a, b) {
$(b).click(function() {
c.hide().eq(a).show()
});
b.checked && b.click()
})
});
</script>
</head>
<body>
<input type="radio" class="lenght" name="length" checked="checked">
<input type="radio" class="lenght" name="length">
<input type="radio" class="lenght" name="length">
<div class="vehicle">1</div>
<div class="vehicle">2</div>
<div class="vehicle">3</div>
</body>
</html>
|
рони,
как то так не получается, там много всего надо скидывать)) может так получиться у меня объяснить, в чем проблема: вот кусок js отвечающий за замену при нажатии на выбранное событие.
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.vehicle-nav > .op input[type="radio"] + label li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
$('.wrapper-dropdown-3').removeClass('active');
obj.index = opt.index();
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
но когда я добавил в js открывашку
var _click = function () {
var b = 1;
return function (c) {
var a = document.getElementById("vehicle-" + b);
c == b && (a.style.display = "none" == a.style.display ? "" : "none");
c != b && (a.style.display = "none", a = document.getElementById("vehicle-" + c), a.style.display = "", b = c)
}
}();
window.onload = function() {
_click(1)
}
то перестала работать замена выбранного события. Может какой то конфликт?!) |
d1mka21,
попробуйте адаптировать код выше, если вы правильно описали алгоритм вам достаточно указать правильные селекторы для кнопок и блоков и возможно заменить клик на change. разбирать зависимости конфликта ваших скриптов и код вашего html нет возможности. |
Ну вроде бы получилось))) СПАСИБО!!!!
Единственное, что при загрузке ничего не отображается, а начинает отображаться только после выбора кнопки( Но это появилось, когда я добавил второй список с кнопками, так что сейчас на подобии первого буду городить совой огород)))) Еще раз огромной СПАСИБО!!!! |
d1mka21,
если меняли клик на change смените в двух местах даже лучше так b.checked && $(b).change() |
рони,
у меня получилось адаптировать под свои нужды код вот такого плана, но два таких же кода, ток другие классы кроме ".vehicle-data" - уже не работает, один из них:
$(".vehicle-data").hide();
var activeVehicleData = $(".vehicle-nav .active a").attr("href");
$(activeVehicleData).show();
$(".vehicle-nav li").on("click", function(){
$(".vehicle-nav .active").removeClass("active");
$(this).addClass('active');
$(activeVehicleData).fadeOut( "slow", function() {
activeVehicleData = $(".vehicle-nav .active a").attr("href");
$(activeVehicleData).fadeIn("slow", function() {});
});
return false;
});
И блин, даже второй выпадающими списками такая же фигня(( |
| Часовой пояс GMT +3, время: 14:04. |