Question

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

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

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

然后点击后从这里转换这些元素（menu_hide＆amp; lockscreen_on）：

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

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

到此（menu_show＆amp; 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);

在尝试实现不明显的页面加载时，也可以开放更好的实践。

Answer 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。感谢您更新您的示例。调整了适合的答案。

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

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

2 个答案:

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