Changing jQuery element id causes error

Question

I have 4 divs with identifiers #registrieren , #story , #faq and #mediadaten , and this jQuery script:

 var menu=''; $(function() { $('#registrieren').attr('id', 'menuAktiv'); menu='registrieren'; $('#registrieren').click(function() { if(menu != 'registrieren') { $('#menuAktiv').attr('id', menu); $('#registrieren').attr('id', 'menuAktiv'); menu='registrieren'; } alert(menu); }); $('#story').click(function() { if(menu!='story') { $('#menuAktiv').attr('id', menu); $('#story').attr('id', 'menuAktiv'); menu='story'; } alert(menu); }); $('#faq').click(function() { if(menu != 'faq') { $('#menuAktiv').attr('id', menu); $('#faq').attr('id', 'menuAktiv'); menu='faq'; } alert(menu); }); $('#mediadaten').click(function() { if(menu != 'mediadaten') { $('#menuAktiv').attr('id', menu); $('#mediadaten').attr('id', 'menuAktiv'); menu='mediadaten'; } alert(menu); }); }); 

Now when I click on #story , #faq or #mediadaten , I cannot change the #registrieren identifier to #menuAktiv .

The same problem occurs when I change the identifier of another element of these elements at the beginning. Any solutions?

Answer 1

You should use classes instead of ids to indicate which div is active.

http://api.jquery.com/addClass

http://api.jquery.com/toggleClass

http://api.jquery.com/removeClass

then use $ ('. classname') to select it.

Answer 2

Instead of changing id to menuAktiv try using a class.

 $(function() { $('#registrieren').addClass('menuAktiv'); // attach a click to all items $('#registrieren,#story,#faq,#mediadaten').click(function() { if ($(this).is(".menuAktiv")) return false; // remove current active menu class $('.menuAktiv').removeClass('menuAktiv'); // set active class to clicked item $(this).addClass('menuAktiv'); }); });​ 

Perhaps this will be even more optimized if I see your markup

---

working example: http://jsfiddle.net/hunter/XMu9n/

Answer 3

From your code, it seems that you are trying to make something active with your id=menuAktiv .

Then for this you can use class=menuAktiv .

Code:

 $('#registrieren').addClass('menuAktiv'); // initially set active // class to registrieren 

then when you click on any of them, change this class. For instance:

 $('#registrieren, #store, #faq, #mediadaten').click( function() { $('.menuAktiv').removeClass('menuAktiv'); // remove active class $(this).addClass('menuAktiv'); // add active class to clicked item }); 

---

More details

It will be better if you create a common function for this. For instance:

 function changeActiveElement(el) { $('.menuAktiv').removeClass('menuAktiv'); // remove active class $(el).addClass('menuAktiv'); // add active class to clicked item } 

Now call this function from the click handler, as shown below:

 $('#registrieren, #store, #faq, #mediadaten').click( function() { changeActiveElement(this); }); 

Answer 4

The problem arises from the first few lines.

  $('#registrieren').attr('id', 'menuAktiv'); menu='registrieren'; $('#registrieren').click(function() { if(menu != 'registrieren') { $('#menuAktiv').attr('id', menu); $('#registrieren').attr('id', 'menuAktiv'); menu='registrieren'; } alert(menu); }); 

The third line of $ ('# registrieren') does not indicate anything. $ ('# registrieren') searches for the dom element with the id = "registrieren" element. Well, since you changed this element identifier to something else, $ ('# registrieren') will not give you anything.

To make it work (not necessarily the best approach to what your code does), and to prove that what I just described, in fact, what you can do is save the link to this element in a variable (preliminary replacement). Then in the future you will use this anytime you want to target an item.

 var registrieren = $('#registrieren'); registrieren.attr('id', 'menuAktiv'); registrieren.click(function() { //etc }); 

Regarding the use of classes instead of ids for “state changes”, yes, this is probably a much better idea - no need to keep references to previous identifiers.