javascript - 使用 html 属性设置 javascript 变量

Question

我正在尝试重新创建 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)

Answer 1

一些注意事项:

1. getElementsByName returns a list of elements .该列表没有 style属性(列表中的条目)。

2. id s 必须 是唯一的，您不能将相同的 ID 放在多个元素上。使用类将元素组合在一起。

3. data-* attributes可能是比 name 更好的选择，因为您可以在任何元素类型上使用它们。

4. 如果您想根据单选按钮值显示/隐藏元素，您需要选择要显示/隐藏的所有元素，而不仅仅是与单选按钮值匹配的元素。然后遍历该列表，根据它们是否匹配所选值来显示/隐藏。

5. load事件发生在页面加载周期的非常后期(例如，就在最后)。而不是使用 load , 把你的 script标记在文档的最后，就在结束之前 </body>标记，并立即进行事件连接。

6. 我可能会使用类来切换可见性而不是 style.display .

7. 您可以通过 getAttribute 从元素中获取属性.

8. 您可以使用 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>

您可能会做出一些进一步的更改:

• 将所有代码包装在 IIFE 中所以没有什么是全局性的。
• 将输入及其标签包装在 label 中元素，并切换它们的可见性，而不是直接切换输入。
• 用容器换行而不是使用 br .