Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.03.2015, 17:33
Интересующийся
Отправить личное сообщение для Jeick9 Посмотреть профиль Найти все сообщения от Jeick9
 
Регистрация: 08.10.2014
Сообщений: 23

Переключение div-блоков с помощью radio кнопок
Мне собственно нужно сделать переключатель div-блоков с помощью radio intu-ов.
Нашел вот такой пример реализации:
<script type="text/javascript">
  function showOrHide(cat1, cat2, cat3) {
    cat1 = document.getElementById(cat1);
    cat2 = document.getElementById(cat2);
	cat3 = document.getElementById(cat3);

    cat1.style.display = "block";
    cat2.style.display = "none";
	cat3.style.display = "none"
  }
</script>


<td><input type = "radio" id = "cb1" onclick = "showOrHide('cat1', 'cat2','cat3');" name="oplata" value="0"> Доллар </td>  
<td><input type = "radio" id = "cb2" onclick = "showOrHide('cat2', 'cat1', 'cat3');" name="oplatat" value="1"> Рубль</td> 
<td><input type = "radio" id = "cb3" onclick = "showOrHide('cat3', 'cat1','cat2');" name="oplata" value="3"> Гривна</td> </tr>


<div id = 'cat1' style = 'display: none;'>1</div>
<div id = 'cat2' style = 'display: none;'>2</div>
<div id = 'cat3' style = 'display: none;'>3</div>


Проблема в том, что при выборе одного radio-кнопки всегда остаются две активные кнопки. На сколько я понимаю это из-за того что используется showOrHide, который поддерживает только два положения. Подскажите пожалуйста как это правильно реализовать.
Ответить с цитированием
  #2 (permalink)  
Старый 10.03.2015, 05:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Вы ведь буквально недавно породили тему по сути ничем не отличающую от этой, разница лишь в другом наборе html-элементов, при этом использовалась jQuery. Для чего же вы подключаете эти десятки КБ, если не используете их?

Есть такая замечательная вещь как индекс в наборе, это и массив, это и коллекция элементов, что тоже является по сути массивом. Так вот, эта замечательная вещь позволяет работать с набором, скажем так - анонимно. Мы даже можем не знать всех потрохов каждого элемента из этого набора, но при этом обратиться к каждому элементу набора проблемы не будет.

То есть, если у вас есть один набор элементов, который надо связать с другим набором, то единственное условие, которое необходимо соблюдать для их связи, это соответствие индексов коллекций элементов в каждом из наборов. В контексте DOM это означает, что ваши элементы div должны быть расположены на странице с той же последовательностью, как и радио кнопки, с которыми эти div надо связать. Тогда все просто:

<!DOCTYPE HTML>
<html>
<head>
<style>
#secondary div {
    display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
   $('#primary').on('click', 'input:radio', function() { //обрабатываем события радио кнопок
      $('#secondary div').hide() //скрыть все div
                         .eq($(this).index()) //получить div связанный по индексу радио кнопки 
                         .show() //сделать этот div видимым
   })
});
</script>    
</head>
 
<body>
<div id="primary">
     <input type="radio" name="as" checked="" />
     <input type="radio" name="as" />
     <input type="radio" name="as" />
</div>
<div id="secondary">
    <div style="display:block">DIV 1</div>    
    <div>DIV 2</div>
    <div>DIV 3</div>
</div>
</body>
</html>

Последний раз редактировалось laimas, 10.03.2015 в 05:52.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сортировка блоков div CRYSIS_STALKER Events/DOM/Window 2 11.07.2014 14:18
Переключение блоков. lon Элементы интерфейса 7 03.07.2013 09:08
Проблема с load в div и импортом стороннего кода с помощью javascript 1quick1 Events/DOM/Window 9 04.02.2011 13:16
Несколько div блоков. Переключение по нажатии на соответствующую ссылку. Help$ Элементы интерфейса 4 25.09.2010 00:01
Появление блоков div в зависимости от radio Oracool Events/DOM/Window 1 04.12.2009 18:39