Использование радиокнопок для скрытия div с несколькими слоями

Я хорошо знаю, что использование функции «Показать/скрыть» дало ответ, когда дело доходит до переключателей, но я искал решение своей проблемы повсюду. То, что я пытаюсь сделать, это создать форму, в которой у посетителя есть несколько вариантов на выбор, они нажимают один из указанных вариантов, он отображает скрытый div, а внутри этого div он дает посетителю больше возможностей для выбора. Здесь я столкнулся с проблемой. Я хотел бы сделать так, чтобы первый скрытый div, который отображается, оставался показанным после того, как один из параметров внутри этого div выбран для отображения того, что скрывает эта кнопка.

Вот jfiddle для того, над чем я сейчас работаю - http://jsfiddle.net/UDEQZ/

Вот html

<input name="pagetype" type="radio" onclick="show(0)" />First
<input name="pagetype" type="radio" onclick="show(1)" />Second
<input name="pagetype" type="radio" onclick="show(2)" />Third
<p></p>
<div id="d0" class="CF" style="display:none;">Select One:
<p></p>
<input name="pagetype" type="radio" onclick="show(3)" />One
<input name="pagetype" type="radio" onclick="show(4)" />Two
<input name="pagetype" type="radio" onclick="show(5)" />Three
<input name="pagetype" type="radio" onclick="show(6)" />Four
<input name="pagetype" type="radio" onclick="show(7)" />Five
<input name="pagetype" type="radio" onclick="show(8)" />Six
<input name="pagetype" type="radio" onclick="show(9)" />Seven</div>
<div id="d1">Two</div>
<div id="d2">Three</div>
<div id="d3">Hazaa</div>
<div id="d4">Bazinga</div>
<div id="d5">Hazaa</div>
<div id="d6">Bazinga</div>
<div id="d7">Hazaa</div>
<div id="d8">Bazinga</div>
<div id="d9">Hazaa</div>

И вот скрипт, который я использую

function show(number) {
"use strict";
var el, i = 0;
while (el = document.getElementById("d" + (i++))) {
    el.style.display = "none";
}
document.getElementById('d' + number).style.display = "block";
}

Что касается HTML, я попытался сделать одну вещь, которая, по моему мнению, должна была сработать, была с onclick="show(3)". Я изменил ее на onclick="show(0, 3)". Но когда вы щелкнули переключатель с надписью One рядом с ней, ничего не произошло.

Я все еще новичок в javascript/jquery, и я видел, как show/hide используется для многих задаваемых вопросов с переключателями, но мне еще предстоит увидеть решение или даже вопрос, относящийся к моей проблеме. Я пробовал несколько разных вариантов, запуская его через массив (все еще что-то вроде этого, ха-ха), используя функцию «показать/скрыть» и множество других способов, которые были описаны здесь и на других сайтах. По какой-то причине мне кажется, что решение чрезвычайно простое, и я просто был слишком глуп, чтобы увидеть его опубликованным или пропущенным прямо над ним.


person Russell P.    schedule 09.07.2013    source источник
comment
если я правильно понял: чтобы получить атрибут elem, используйте elem.getAttribute("checked"). чтобы проверить, проверен ли elem или не использовать elem.checked, см. документ api.jquery.com/attr   -  person epsilones    schedule 09.07.2013
comment
Ньюбен, хотя это не совсем то, что я искал, я все же ценю ответ и перечитаю документ в более неторопливом темпе, чтобы лучше расширить свои знания. Спасибо =)   -  person Russell P.    schedule 09.07.2013


Ответы (1)


поскольку jquery помечен, я использую jquery, чтобы уменьшить ваш код.

function show(number) {

  $('[id^="d"]').hide();
  if(number >=3){
    $('#d0').show();
  }
  $('#d' + number).show();
}

однако это касается всех ваших других div, таких как d3,d4,d5,d6.., подпадающих под d0.. что я здесь делаю, так это использую селектор атрибутов $('[id^="d"]'), который выбирает все идентификаторы элементов, начиная с d, и скрывает их... так что это скрывает все элементы.. и затем проверьте, если числовой параметр > 3 .. если он больше 3, то покажите элемент #d0 .., затем покажите только элемент, идентификатор которого = number

скрипка здесь

person bipen    schedule 09.07.2013
comment
Ах успех! Спасибо Бипен! У меня есть тег jquery, потому что я искал повсюду и знал, что для этой конкретной проблемы jquery, скорее всего, будет ответом. Если он проверит, равно ли число ›3, вызовет ли это ошибку, если я решу скрыть d0-2 вместо их отображения? - person Russell P.; 09.07.2013
comment
условие if существует только для того, чтобы убедиться, что при нажатии на радио со значениями один, два, три... первый <div id="d0".. (сам) не скрывает... $('#d0').show();..это означает показать div, чей идентификатор d0 - person bipen; 09.07.2013
comment
Извините, я скучаю по чтению собственного кода, ха-ха. Это был долгий день .. Итак, позвольте мне попробовать еще раз, с числом ›3, когда число равно ‹3, оно скрывает все, что имеет значение больше 3, верно? - person Russell P.; 09.07.2013
comment
Да, после того, как я прочитал ваше редактирование, оно щелкнуло. Функция if вызывает любой div больше 3, d0 остается показанным, а d1 и d2 проверяются, d0 снова скрывается. - person Russell P.; 09.07.2013
comment
Теперь пришло время еще больше расширить это и включить больше начальных параметров, а затем добавить параметры к каждому начальному варианту. Было бы полезно, по вашему мнению, создать новую функцию для каждой опции (например, по одной для первого переключателя, второго и третьего)? - person Russell P.; 09.07.2013
comment
лучше, если вы обрабатываете все параметры с помощью одной функции (работайте над одной функцией, чтобы это работало для всех)... вместо того, чтобы создавать каждую функцию для каждого параметра... просто подумайте... что, если вам нужно добавить еще 10 параметров в в ближайшем будущем это означает, что вы добавите еще 10 функций... и еще 20 опций позже... хе-хе :) - person bipen; 09.07.2013
comment
О дорогой ха-ха. Да. Потенциально это был бы кошмар. Единственная причина, по которой я думал об использовании разных функций для каждой из них, заключалась в том, чтобы разбить ее и упростить чтение, при условии, что не легче кодировать, скажем, но для тех, кто следит за мной, они смогут посмотреть на это и все в порядке, я вижу что тут происходит, даже не просматривая все комментарии - person Russell P.; 09.07.2013
comment
хмммм, вы обряд .. :) разделение функций более ясно, читабельно и легко для понимания ... но я .. пишу меньше, делаю больше .. вроде парень .. :) :) .. так что в любом случае itz хорошо, если вы отделите функцию.. я не думаю, что это создаст проблему (с точки зрения производительности... просто вы будете писать немного больше кодов)... и даже если это произойдет, это будет незначительным и незаметным... так что вы должны иди с тем, что тебе подходит.. - person bipen; 09.07.2013
comment
Я продолжу и сделаю это, так как форма, над которой я работаю, было бы лучше, если бы все было разделено и легко читалось, поэтому, когда мне самому придется вернуться в нее, чтобы что-то изменить или добавить, я не буду идти О. О, что за .. Но еще раз спасибо bipen =D - person Russell P.; 09.07.2013