Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.11.2015, 15:04
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

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();
}
});
});

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 23.11.2015, 15:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,431

Сообщение от d1mka21
а если у меня их больше двух
Использовать классы.
Нужно будет:
- Спрятать все однотипные
- Открыть нужный
Ответить с цитированием
  #3 (permalink)  
Старый 23.11.2015, 15:33
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

ksa,
а не подскажите, есть где то образец кода js такого плана?!
Ответить с цитированием
  #4 (permalink)  
Старый 23.11.2015, 15:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,431

Сообщение от d1mka21
есть где то образец кода js такого плана?
рони всегда советовал сделать поиск по слову "открывашка".

Проверь, есть там чего?
http://javascript.ru/forum/search.php?searchid=58003
Ответить с цитированием
  #5 (permalink)  
Старый 23.11.2015, 15:39
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

ksa,
ахха)))
спасибо буду шуршать в темах))) надеюсь, что-то да найду))
Ответить с цитированием
  #6 (permalink)  
Старый 23.11.2015, 15:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,503

d1mka21,
Открывашка 212 input type=radio
Ответить с цитированием
  #7 (permalink)  
Старый 24.11.2015, 12:38
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

рони,
Попробовал такую "открывашку", но руки у меня вообще не от туда, походу)) т.к. 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">&nbsp;<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/
Ответить с цитированием
  #8 (permalink)  
Старый 24.11.2015, 13:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,503

d1mka21,
Сообщение от d1mka21
var divs = document.querySelectorAll('.active + div'),
таких элементов у вас в коде нет ... посмотреть не могу ни тут ни там -- локализуйте проблему это - то правильно нашли inp = document.querySelectorAll('[name="length"]'),
Ответить с цитированием
  #9 (permalink)  
Старый 24.11.2015, 13:51
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

рони,
да в этих двух строчках я и меняю название class'ов, но все равно не работает, я уже и пробовал название классов ставить такие же, как у Вас в том примере, только вместо тега "p" ставил div, но и с "р" пробовал, но все равно не срабатывает(((
Ответить с цитированием
  #10 (permalink)  
Старый 24.11.2015, 14:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,503

d1mka21,
что открыть закрыть хотите какие элементы, хоть строку тут напишите
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Показ следующего числа в зависимости от нажатой кнопки TTATPuOT jQuery 1 09.10.2015 18:56
показать/убрать текст при переходе с кнопки на кнопу radio zazula Общие вопросы Javascript 12 03.08.2015 11:53
Как вызвать событие уже отмеченной radio кнопки? cha0s jQuery 1 09.05.2014 12:48
html код в зависимости от выбора radio Findail Общие вопросы Javascript 6 30.03.2013 10:53
<select> в зависимости от выбранного radio imediasun1 Элементы интерфейса 1 23.12.2012 21:38