JavaScript：同一頁面上所有href上的調用切換功能

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循環。

查看下面的演示。

 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"; } }); } 

 a {display: block;} 

 <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>