Question

我很清楚，当谈到单选按钮时，使用显示/隐藏功能已被回答，但我已经搜索了高低，以解决我的问题。我试图做的是创建一个表单，其中访问者有几个选项可供选择，他们点击一个所述选项，它显示一个隐藏的div，在该div中，它为访问者提供了更多选项供选择。这是我遇到问题的地方。我想要做的是让第一个隐藏的div显示为在选择div中的一个选项后显示该按钮隐藏的内容。

以下是我目前正在进行的工作的问题 - 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)"但是当你点击旁边的单选按钮时，没有发生了。

我还是javascript / jquery的新手，我已经看到show / hide被用于提出的很多单选按钮问题，但我还没有看到解决方案，甚至还有与之相关的问题我遇到的问题。我已经尝试了几个不同的选项，通过一个阵列运行它（还有点好吗？在那个哈哈上），使用show / hide功能，以及在这里和其他网站上描述的其他多种方式。出于某种原因，我觉得这个解决方案非常简单，我只是太愚蠢而无法看到它发布或跳过它。

Answer 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开头并隐藏它的元素ID ...所以这会隐藏所有元素..然后检查数字参数是否是＆gt; ; 3 ..如果大于3，则显示#d0元素..，然后只显示其id为number的元素

fiddle here

使用单选按钮隐藏多个图层的div

1 个答案: