Използване на радио бутони за скриване на div с множество слоеве

Наясно съм, че използването на функцията Show/Hide е отговорено, когато става въпрос за радио бутони, но търсих високо и ниско за решение на моя проблем. Това, което се опитвам да направя, е да създам формуляр, в който посетителят има няколко опции за избор, кликва върху една от споменатите опции, показва скрит 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 и съм виждал показване/скриване да се използва за много от зададените въпроси за бутоните за избор, но все още не съм видял решение или дори въпрос, свързан с проблема, който имам. Опитах няколко различни опции, пускайки го през масив (все още върви някак си, а? на този, хаха), използвайки функцията за показване/скриване и множество други начини, които са описани тук и на други сайтове. По някаква причина имам чувството, че решението е изключително просто и просто бях твърде глупав, за да го видя публикувано или прескочен.


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
Ааа успех! Благодаря ти bipen! Имам етикет на 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
хмммм, ти си обред .. :) разделителните функции са по-ясни, четивни и лесни за разбиране... но аз съм... пиша по-малко, правя повече.. вид на човек .. :) :).. така че както и да е добре, ако отделите функцията.. не мисля, че това ще създаде проблем (от гледна точка на производителността..само че ще пишете малко повече кодове) ..и дори да се случи, това ще бъде пренебрежимо малко и незабележимо..така че трябва вземете каквото ви подхожда.. - person bipen; 09.07.2013
comment
Ще продължа и ще направя това, тъй като формулярът, върху който работя, би било най-добре всичко да е разделено и лесно за четене, така че когато аз самият трябва да се върна в него, за да променя нещо или да добавя нещо, няма да отида o.O какво .. Но пак благодаря bipen =D - person Russell P.; 09.07.2013