Add/Remove multiple classes on multiple elements simultaneously

Question

What I'm trying to achieve is using a single element, by onclick, is add and remove 2 class names on 2 independent elements simultaneously.

Here is my element I'm using to trigger the js/jquery.

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

Then once clicked turn these elements from this (menu_hide & lockscreen_on):

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

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

to this (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);

Open to better practices too as I'm trying to achieve unnoticeable page loading.

If you are going to use jQuery at all, use it for selectors as well. Your code will shrink by 50%+. e.g. `$('#myElementId').click(function()` — Gone Coding, Aug 04 '14 at 16:10
Thanks. Just as fyi... I'm totally a JS/Jquery novice. In other practice suchas CSS etc... I get using unique ID, but since I was trying to trigger the same thing, I didn't know if the ID had to be attached to all items being triggered. For sake of better question and practice I'll revise that. — RUBYHAUS, Aug 04 '14 at 16:14
You can attach triggers via classes or id's or attributes, but id-based selectors are the fastest as the browser maintains a lookup-table of all the unique ids. — Gone Coding, Aug 04 '14 at 16:35

Gone Coding · Accepted Answer · 2014-08-04T16:33:20.577

0

You are worrying too much about changing multiple attributes causing screen flickers etc. All these operations will complete in sequence before the page renders :)

You can simplify your code using jQuery though:

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');
});

As noted you must have unique ids for elements. Thanks for updating your example. Have adjusted answer to suit.

edited Aug 04 '14 at 16:33

answered Aug 04 '14 at 16:14

Gone Coding

88,305
23
172
188

Thanks for the help! Exactly what I was trying to achieve. – RUBYHAUS Aug 04 '14 at 16:36
This may be not possible and way out there... but is there a way to detect if a device or url is mobile based allow the somename2 toggle class to be used. But otherwise don't allow??? But always allow somename1 to be used. That may be a whole other ball of wax. – RUBYHAUS Aug 04 '14 at 16:39
You can detect by either resolution, or browser sniffing. The question becomes what do "you" consider to be mobile-based? :) – Gone Coding Aug 04 '14 at 16:41
It's a responsive web design... however I'd only allow mobile CSS to be used when browser detects .mobi, or... maybe better by using @media to detect lower than 500px width allow #somename2 to be in use. Currently it's using at media of below 500px do X. – RUBYHAUS Aug 04 '14 at 16:43
If you use `bootstrap` there is a nice trick to add resolution change events. Let me know if you are. – Gone Coding Aug 04 '14 at 16:44
I'm not but... I know of resolution change events using jquery. I've never done it before though. – RUBYHAUS Aug 04 '14 at 16:50
`(function () { var width = screen.width, height = screen.height; setInterval(function () { if (screen.width !== width || screen.height !== height) { width = screen.width; height = screen.height; $(window).trigger('resolutionchange'); } }, 50); }());` – RUBYHAUS Aug 04 '14 at 16:50
[http://stackoverflow.com/questions/8575772/how-to-detect-in-jquery-if-screen-resolution-changes] – RUBYHAUS Aug 04 '14 at 16:51

score 0 · Answer 2 · answered Aug 04 '14 at 16:24

You don't need to create new elements to do this.

$('#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");
    }
});

Add/Remove multiple classes on multiple elements simultaneously

2 Answers2

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