使用 Javascript 在多个地方应用一个类

Posted 2023-03-16

【中文标题】使用 Javascript 在多个地方应用一个类

【英文标题】：Applying A Class In Multiple Places Using Javascript

【发布时间】：2014-12-16 01:42:40

【问题描述】：

背景

我正在开发一个包含用于导航的抽屉的项目。当点击一个切换开关 ('nav-drawer-toggle') 时，它会打开抽屉并将正文移动抽屉的宽度。

问题

但是，我还想将“导航”类应用到我的页脚（有一个 <footer> 标记）和我的页眉（有一个 <nav> 标记）。我尝试添加getElementsByTagName('footer') 和getElementsByTagName('nav')，但显然这样做不正确。我如何正确地让这些与当前工作的getElementById('body') 一起工作？

更新

现在页脚可以工作，但页眉仍然没有改变。这是更新的代码：

var checkbox = document.getElementById('nav-drawer-toggle');
  var dashboard_body = document.getElementById('body');
  var dashboard_header = document.getElementsByTagName('nav')[0];
  var dashboard_footer = document.getElementsByTagName('footer')[0];
  checkbox.onchange = function() 
     if(this.checked) 
       dashboard_body.className += 'navigating',
       dashboard_header.className += 'navigating',
       dashboard_footer.className += 'navigating';
      else 
       dashboard_body.className = '',
       dashboard_header.className = '',
       dashboard_footer.className = '';
     
  ;

【参考方案1】：

这一切都取决于您的 html。我猜你可能会遇到getElementsByTagName 和getElementsByClassName 都返回HTMLCollection 而不是单个元素节点的问题。因此，如果您只有一个<footer>，您可以使用getElementsByTagName('footer')[0] 来获取该页脚来放置课程。

【讨论】：

谢谢你，彼得。奇怪的是，页脚现在可以工作，但页眉仍然有问题。我已经相应地更新了原始问题和代码 sn-p 以反映这一点。

没问题。在你编辑之前，你有没有提到你的导航已经有一个类？如果是这样，当您向其中添加 navigating 类时，您使用的是 +=，前面没有空格，因此类名现在将是 origClassNamenavigating 而不是 origClassName navigating。

所以您需要+= ' navigating'; 但请记住，当您取消选中该框时，除了navigating 之外，您还将丢失originalClassName。另外，我刚刚注意到您在某些陈述之后使用了逗号。在这种情况下，它可以正常工作，但是逗号在 javascript 中表示特定的含义，因此您可能应该只使用分号。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【参考方案2】：

您同样可以为每个其他容器指定一个 ID，例如“footer”和“navbar”，并使用与上面相同的代码。

var dashboard_body = document.getElementById('body');
var dashboard_navbar = document.getElementById('navbar');
var dashboard_footer = document.getElementById('footer');

以上内容虽然重复，但应该可以满足您的需求。您可以将这些对象保存到一个数组中，然后在数组中循环，这样可以节省几行代码。

为了完整起见（和个人喜好），如果您不反对使用它，我会说这在 jQuery 中更容易实现。如果是这样，那就很简单了：

if (this.checked) 
    $(".your-class-name").addClass("navigating");
 else 
    $(".your-class-name").removeClass("navigating");

在上面的 jQuery 示例中，your-class-name 将被替换为 CSS 类名称，您可以将其应用于受 navigation 类影响的元素。请记住，您可以使用多个由空格分隔的类名（您可能已经知道），例如：class="my-class cool-class navigating"

【讨论】：

你会在函数部分添加什么来对应新的变量？在您的 jQuery 示例中，我如何将它附加到充当切换开关的 nav-drawer-toggle 上？谢谢！