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,
что открыть закрыть хотите какие элементы, хоть строку тут напишите |
| Часовой пояс GMT +3, время: 23:12. |