Question

我有一个帮助页面，其中有一堆javascript切换来显示或隐藏该主题的帮助。有没有办法将它们全部切换为全部显示或全部隐藏？

<a href="javascript:toggle('roles');">Roles or Account Permissions</a>
    <div id="roles" style="display:none">

<a href="javascript:toggle('tracks');">Tracks and Activities</a>
    <div id="tracks" style="display:none">

<a href="javascript:toggle('password');">Modifying Password</a>
    <div id="password" style="display:none">

喜欢也许

<a href="javascript:toggle('roles', 'tracks', 'password');">Toggle all</a>

这是我的javascript

function toggle(divId) {
"use strict";
var div = document.getElementById(divId);
if (div.style.display === "none") {
    div.style.display = "block";
} else {
    div.style.display = "none";
}

}

Answer 1

你有jQuery标签，所以听起来你正在使用jQuery？

为每个A标签添加一个类名：

<a href="javascript:$('a.className').toggle();">toggle</a>

无需切换代码。

Answer 2

使用arguments集合循环使用所有ID：

function toggle() {
    "use strict";
    [].slice.call(arguments).forEach(function(divId) {
        var div = document.getElementById(divId);
        if (div.style.display === "none") {
            div.style.display = "block";
        } else {
            div.style.display = "none";
        } 
    });
}

为方便起见，我将arguments转换为纯数组（使用Array.prototype.forEach方法），当然也可以使用简单的for循环。

查看下面的演示。

＆＃13;

function toggle() {
    "use strict";
    [].slice.call(arguments).forEach(function(divId) {
        var div = document.getElementById(divId);
        if (div.style.display === "none") {
            div.style.display = "block";
        } else {
            div.style.display = "none";
        } 
    });
}

＆＃13;

a {display: block;}

＆＃13;

<a href="javascript:toggle('roles');">Roles or Account Permissions</a>
<div id="roles" style="display:none">Roles</div>
    
<a href="javascript:toggle('tracks');">Tracks and Activities</a>
<div id="tracks" style="display:none">Tracks</div>
        
<a href="javascript:toggle('password');">Modifying Password</a>
<div id="password" style="display:none">Modifying Password</div>

<a href="javascript:toggle('roles', 'tracks', 'password');">Toggle all</a>

＆＃13;

JavaScript：在同一页面上的所有href上调用切换功能

2 个答案: