Question

所以我正在做的是创建一个显示单击按钮时人员信息的网站。信息显示在页面的一部分文本框中，您可以单击＆＃34;信息＆＃34;此人姓名旁边的按钮可使内容显示在文本框中。我遇到的问题是当我点击第二个＆＃34;信息＆＃34;时，我无法让内容消失。按钮以显示其他人的信息。我知道必须创建一个函数来改变＆＃34;显示＆＃34;财产到＆＃34;阻止＆＃34;来自＆＃34;无。＆＃34;我理解了函数的前两个语句，但是一旦它到达＆＃34; if ... return＆＃34;声明，我不明白发生了什么。任何帮助解释这将是伟大的！

谢谢！

function resetBioVisi()
{
    var bioElem = document.getElementById("bio");
    var bios = bioElem.childNodes;
    if (bios.length == 0) return;
    for (var index = 0; index < bios.length; index++)
        if (bios[index].style !== undefined)
                bios[index].style.display="none";
}

Answer 1

function resetBioVisi()
{
    //get bio element by id
    var bioElem = document.getElementById("bio");

    //get all child elements of bios
    var bios = bioElem.childNodes;

     //if there are no child elements, do nothing (exit function)
    if (bios.length == 0) return;

     //otherwise, for each element in the list of bios's child elements...
    for (var index = 0; index < bios.length; index++)

        //if the element has a style
        if (bios[index].style !== undefined)

                //set that style to none (make it hidden)
                bios[index].style.display="none";
}

Answer 2

function resetBioVisi()是函数声明。这是函数名称和任何参数。

var bioElem = document.getElementById("bio");获取id为＃34; bio＆＃34;的元素来自dom。

var bios = bioElem.childNodes;获取bioElem的所有子节点。

if (bios.length == 0) return;如果bioElem没有孩子，请立即离开该功能，不要继续。在这种情况下，for循环不会运行。

for (var index = 0; index < bios.length; index++)这是一个循环。您定义了一个索引变量（在本例中为index），一个停止条件和一个迭代器。这表示＆＃34;为bioElem的所有孩子执行以下操作。

if (bios[index].style !== undefined)检查当前子节点的样式。如果未定义，请输入块。如果已定义，请不要输入该块。 bios[index]正在说'＃34;在bios位置index给我一个孩子。 !==说＆＃34;如果左侧不等于未定义的类型或值＆＃34;。

bios[index].style.display="none"。这是在上述条件中，因此我们知道bios[index].style未定义。我们将display样式设置为'hidden'以将其隐藏在用户的视图中。

我会以对你更有意义的方式重写它：

function resetBioVisi() {
    var bioElem = document.getElementById("bio");
    var bios = bioElem.childNodes;

    for (var index = 0; index < bios.length; index++) {
        if (bios[index].style !== undefined) {
            bios[index].style.display="none";
        }
    }
}

Answer 3

有些人提前来过，但无论如何这可能会帮助你更加了解它：

＆＃13;

function resetBioVisi()
{
    // Get the bio element
    var bioElem = document.getElementById("bio");
    
    // Get all the bio element's children
    var bios = bioElem.childNodes;
    
    // If there are no bio children, return since there's nothing to do
    if (bios.length == 0) return;
    
    // Else, loop through them and set their display style to none so they will not be rendered.
    for (var index = 0; index < bios.length; index++)
        if (bios[index].style !== undefined)
                bios[index].style.display="none";
}

var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', resetBioVisi);

＆＃13;

<div id="bio">
    <p>Bio 1</p>
    <p>Bio 2</p>
    <p>Bio 3</p>
</div>
<button>Hide bios</button>

＆＃13;

有人可以解释这个功能是如何工作的吗？

3 个答案: