JavaScript:在同一页面上的所有href上调用切换函数

JavaScript: call toggle function on all href on same page

本文关键字：href 调用 函数 一页 JavaScript      更新时间：2023-09-26

我有一个帮助页面，其中包含一堆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";
}

}

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

然后为每个 A 标记添加一个类名：

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

无需切换代码。

只需使用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>

相关文章：