- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试重新创建 https://chriscoyier.net/ 的功能您有一个带有单选按钮的表单,当您单击单选按钮时,文本会发生变化。
我开始的是:
window.onload=function() {
document.getElementById("hidden_elements").style.display="none";
// attach the click event handler to the radio buttons
var radios = document.forms[0].elements["group1"];
for (var i = [0]; i < radios.length; i++)
radios[i].onclick=radioClicked;
}
function radioClicked() {
if (this.value == "two") {
document.getElementById("hidden_elements").style.display="block";
} else {
document.getElementById("hidden_elements").style.display="none";
}
}
<form id="picker" method="post" action="">
Item 1: <input type="radio" name="group1" value="one" />
Item 2: <input type="radio" name="group1" value="two" />
Item 3: <input type="radio" name="group1" value="three" /><br />
<br />
<div id="hidden_elements">
Input 1: <input type="text" id="intext" />
Input 2: <input type="text" id="intext2" />
Input 3: <input type="text" id="intext3" /><br /><br />
</div>
<input type="submit" id="submitbutton" value="Send form" />
</form>
这允许我隐藏或显示带有 id="hidden_elements"的 div 如果选择了输入数字 2。
我想做的是根据输入 1、2 或 3 隐藏或显示“hidden_elements”的各个元素。
我尝试将“hidden_elements”属性更改为:
<div id="hidden_elements">
Input 1: <input type="text" name="one" />
Input 2: <input type="text" name="two" />
Input 3: <input type="text" name="three" /><br /><br />
</div>
和 JS 到:
var hide = document.getElementById("hidden_elements");
for (var i = [0]; i < hide.length; i++)
hide[i].style.display = "none";
function radioClicked() {
document.getElementsByName(this.value).style.display = "block"
}
但这也行不通。
我尝试过使用 if/else 语句的不太吸引人的方法,但这也行不通。
<div id="paragraphs">
<div id="hidden_element" name="one">Paragraph 1 </div>
<div id="hidden_element" name="two">Paragraph 2 </div>
<div id="hidden_element" name="three">Paragraph 3 </div>
</div>
function radioClicked() {
if (this.value == "one") {
document.getElementById("hidden_element_one").style.display="block";
} else if (this.value == "two") {
document.getElementById("hidden_element_two").style.display="block";
} else if (this.value == "three") {
document.getElementById("hidden_element_three").style.display="block";
}
}
我尝试了更多方法,但行为不是我想要的。知道如何根据选定的单选按钮将显示从“无”更改为“阻止”吗? (我知道你可以用 JQuery 做到这一点,但我正在努力学习 Javascript)
最佳答案
一些注意事项:
getElementsByName
returns a list of elements .该列表没有 style
属性(列表中的条目)。
id
s 必须 是唯一的,您不能将相同的 ID 放在多个元素上。使用类将元素组合在一起。
data-*
attributes可能是比 name
更好的选择,因为您可以在任何元素类型上使用它们。
如果您想根据单选按钮值显示/隐藏元素,您需要选择要显示/隐藏的所有元素,而不仅仅是与单选按钮值匹配的元素。然后遍历该列表,根据它们是否匹配所选值来显示/隐藏。
load
事件发生在页面加载周期的非常后期(例如,就在最后)。而不是使用 load
, 把你的 script
标记在文档的最后,就在结束之前 </body>
标记,并立即进行事件连接。
我可能会使用类来切换可见性而不是 style.display
.
您可以通过 getAttribute
从元素中获取属性.
您可以使用 querySelectorAll
获取匹配任何 CSS 选择器的元素列表。 Use it on document
放眼全局,或 on a specific element只看那个元素。例如,要获取文档中具有名为 data-val
属性的元素列表,您将使用 CSS 选择器 [data-val]
,例如`document.querySelectorAll("[data-val]")。
这是你的代码片段的一个版本,有一些最小的更新;看评论:
// I'd use querySelectorAll rather than the old-style
// forms and elements collections (but those work too)
var radios = document.querySelectorAll("#picker input[type=radio]");
// Initial value is 0, not [0]
for (var i = 0; i < radios.length; i++) { // You were missing { on this line
// Recommend modern event handling, not onclick
radios[i].addEventListener("click", radioClicked);
}
function radioClicked() {
var hidden = document.getElementById("hidden_elements");
hidden.classList.remove("hidden");
// Get all elements within it that have a data-val attribute
var list = hidden.querySelectorAll("[data-val]");
for (var i = 0; i < list.length; ++i) {
var el = list[i];
// Add/remove the hidden class depending on whether it matches
el.classList.toggle("hidden", el.getAttribute("data-val") != this.value);
}
}
.hidden {
display: none;
}
<form id="picker" method="post" action="">
Item 1: <input type="radio" name="group1" value="one" />
Item 2: <input type="radio" name="group1" value="two" />
Item 3: <input type="radio" name="group1" value="three" /><br />
<br />
<!-- Hide this initially with markup rather than code -->
<div id="hidden_elements" class="hidden">
<!-- Use data-val to identify them -->
Input 1: <input type="text" data-val="one" />
Input 2: <input type="text" data-val="two" />
Input 3: <input type="text" data-val="three" /><br /><br />
</div>
<input type="submit" id="submitbutton" value="Send form" />
</form>
您可能会做出一些进一步的更改:
label
中元素,并切换它们的可见性,而不是直接切换输入。br
.关于javascript - 使用 html 属性设置 javascript 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48112669/
你能比较一下属性吗 我想禁用文本框“txtName”。有两种方式 使用javascript,txtName.disabled = true 使用 ASP.NET, 哪种方法更好,为什么? 最佳答案 我
Count 属性 返回一个集合或 Dictionary 对象包含的项目数。只读。 object.Count object 可以是“应用于”列表中列出的任何集合或对
CompareMode 属性 设置并返回在 Dictionary 对象中比较字符串关键字的比较模式。 object.CompareMode[ = compare] 参数
Column 属性 只读属性,返回 TextStream 文件中当前字符位置的列号。 object.Column object 通常是 TextStream 对象的名称。
AvailableSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。 object.AvailableSpace object 应为 Drive 
Attributes 属性 设置或返回文件或文件夹的属性。可读写或只读(与属性有关)。 object.Attributes [= newattributes] 参数 object
AtEndOfStream 属性 如果文件指针位于 TextStream 文件末,则返回 True;否则如果不为只读则返回 False。 object.A
AtEndOfLine 属性 TextStream 文件中,如果文件指针指向行末标记,就返回 True;否则如果不是只读则返回 False。 object.AtEn
RootFolder 属性 返回一个 Folder 对象,表示指定驱动器的根文件夹。只读。 object.RootFolder object 应为 Dr
Path 属性 返回指定文件、文件夹或驱动器的路径。 object.Path object 应为 File、Folder 或 Drive 对象的名称。 说明 对于驱动器,路径不包含根目录。
ParentFolder 属性 返回指定文件或文件夹的父文件夹。只读。 object.ParentFolder object 应为 File 或 Folder 对象的名称。 说明 以下代码
Name 属性 设置或返回指定的文件或文件夹的名称。可读写。 object.Name [= newname] 参数 object 必选项。应为 File 或&
Line 属性 只读属性,返回 TextStream 文件中的当前行号。 object.Line object 通常是 TextStream 对象的名称。 说明 文件刚
Key 属性 在 Dictionary 对象中设置 key。 object.Key(key) = newkey 参数 object 必选项。通常是 Dictionary 
Item 属性 设置或返回 Dictionary 对象中指定的 key 对应的 item,或返回集合中基于指定的 key 的&
IsRootFolder 属性 如果指定的文件夹是根文件夹,返回 True;否则返回 False。 object.IsRootFolder object 应为&n
IsReady 属性 如果指定的驱动器就绪,返回 True;否则返回 False。 object.IsReady object 应为 Drive&nbs
FreeSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。只读。 object.FreeSpace object 应为 Drive 对象的名称。
FileSystem 属性 返回指定的驱动器使用的文件系统的类型。 object.FileSystem object 应为 Drive 对象的名称。 说明 可
Files 属性 返回由指定文件夹中所有 File 对象(包括隐藏文件和系统文件)组成的 Files 集合。 object.Files object&n
我是一名优秀的程序员,十分优秀!