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, время: 22:13. |