0

我想要实现的是通过 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);

当我试图实现不引人注意的页面加载时，也可以接受更好的做法。

4

2 回答 2

0

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

不过，您可以使用 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。感谢您更新您的示例。调整了答案以适应。

于 2014-08-04T16:14:39.190 回答
0

您无需创建新元素即可执行此操作。

$('#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");
    }
});
于 2014-08-04T16:24:24.573 回答