Question

假设左侧有2个垂直按钮：

<div class="button" id="files" >files</div>
<div class="button" id="dirs">dirs</div>

当点击一个时，我希望它将相应的框放在它旁边（内联）

<div class="commands_group" id="files_commands">file commands</div>
<div class="commands_group" id="dirs_commands">dir commands</div>

我开始为每个按钮添加一个事件监听器：

window.onload = init;

function init()
{
    'use strict';
    var classname = document.getElementsByClassName("button");

    for(var i=0;i<classname.length;i++)
    {
        classname[i].addEventListener('click', show_commands(), false);
    }
}

哪个好。但是现在我想把相应的框放在内联中，即如果单击了文件按钮，则files_commands需要从display：none显示：inline。

我在选择相应的框

时遇到问题

我目前的代码是：

function show_commands()
{   
    'use strict';

    var classname = document.getElementsByClassName("commands_group");
    for(var i=0;i<classname.length;i++)
    {       
        classname[i].style.display = 'none';    
    } //just to reset the view to nothing

以下应该是主要部分（并且是我的问题的基础）但我不知道如何选择命令组的具体ID

    var name = this.id.stringValue.concat("_commands");
    document.getElementById(name).style.display = 'inline';

}

Answer 1

这是你想要的吗？

var name = this.id.stringValue.concat("_commands");

此行应为var name = this.id.concat("_commands");

＆＃13;

window.onload = init;

function init()
{
    'use strict';
    var classname = document.getElementsByClassName("button");

    for(var i=0;i<classname.length;i++)
    {
        classname[i].addEventListener('click', show_commands, false);
    }
}

function show_commands()
{   
    'use strict';

    var classname = document.getElementsByClassName("commands_group");
    for(var i=0;i<classname.length;i++)
    {       
        classname[i].style.display = 'none';    
    } //just to reset the view to nothing

    var name = this.id.concat("_commands");
    document.getElementById(name).style.display = 'inline';

}

＆＃13;

<div class="button" id="files" >files</div>
<div class="button" id="dirs">dirs</div>    

<div class="commands_group" id="files_commands">file commands</div>
<div class="commands_group" id="dirs_commands">dir commands</div>

＆＃13;

使用事件监听器

1 个答案: