同时在多个元素上添加/删除多个类

Posted 2023-03-16

【中文标题】同时在多个元素上添加/删除多个类

【英文标题】：Add/Remove multiple classes on multiple elements simultaneously

【发布时间】：2014-09-27 04:19:51

【问题描述】：

我想要实现的是使用单个元素，通过 onclick，同时在 2 个独立元素上添加和删除 2 个类名。

这是我用来触发 js/jquery 的元素。

<div class="top-tool-buttons"><a href="" id="myElementId"></a></div>

然后点击后从这里打开这些元素（menu_hide & lockscreen_on）：

<div id="somename1" class="list-nav menu_hide"></div>

<div id="somename2" class="screen lockscreen_off"></div>

对此（menu_show & lockscreen_off）：

<div id="somename3" class="list-nav menu_show"></div>

<div id="somename4" class="screen lockscreen_on"></div>

jQuery/JS

document.getElementById('#myElementId').addEventListener('click', function() 
.removeClass('menu_hide lockscreen_on').addClass('menu_show lockscreen_off');
, false);

document.getElementById('#myElementId').addEventListener('click', function() 
.removeClass('menu_show lockscreen_off').addClass('menu_hide lockscreen_on');
, false);

我也在尝试实现不引人注意的页面加载，因此也愿意接受更好的做法。

【问题讨论】：

附注，ID必须是唯一的。

如果你打算使用 jQuery，也可以将它用于选择器。您的代码将缩小 50%+。例如$('#myElementId').click(function()

谢谢。仅供参考...我完全是 JS/Jquery 新手。在 CSS 等其他实践中......我使用唯一 ID，但由于我试图触发相同的事情，我不知道 ID 是否必须附加到所有被触发的项目。为了更好的提问和练习，我会修改它。

您可以通过类或 id 或属性附加触发器，但基于 id 的选择器是最快的，因为浏览器会维护所有唯一 id 的查找表。

【参考方案1】：

您太担心更改多个属性导致屏幕闪烁等。所有这些操作都会在页面呈现之前依次完成:)

你可以使用 jQuery 来简化你的代码：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/7b75Q/

$('#myElementId').click(function(e) 
    e.preventDefault();
   // Toggle all 4 classes off or on
   $('#somename1').toggleClass('menu_hide menu_show');
   $('#somename2').toggleClass('lockscreen_on lockscreen_off');
);

如前所述，元素必须具有唯一的 ID。感谢您更新您的示例。已调整答案以适合。

【讨论】：

感谢您的帮助！正是我想要达到的目标。

这可能是不可能的，而且还有出路……但是有没有办法检测设备或 url 是否基于移动设备，允许使用 somename2 切换类。但否则不允许？？？但始终允许使用 somename1。那可能是另一个蜡球。

您可以通过分辨率或浏览器嗅探来检测。问题变成了“你”认为什么是基于移动的？ :)

这是一个响应式网页设计...但是我只允许在浏览器检测到 .mobi 时使用移动 CSS，或者...最好使用@media 检测低于 500px 的宽度允许#somename2 正在使用中。目前它在低于 500px do X 的媒体上使用。

如果你使用bootstrap 有一个很好的技巧来添加分辨率改变事件。如果你是，请告诉我。

【参考方案2】：

您无需为此创建新元素。

$('#myElementId').on('click',function() 
    if($("showname1").hasClass("menu_hide"))
        $("#showname1").removeClass("menu_hide").addClass("menu_show");
        $("#showname2").removeClass("lockscreen_off").addClass("lockscreen_on");
     else 
        $("#showname1").removeClass("menu_show").addClass("menu_hide");
        $("#showname2").removeClass("lockscreen_on").addClass("lockscreen_off");
    
);