Question

I have added the following behavior to a range of divs.

$("div#_FIRST_Menu").click(function () {
  ...
  $("div#_FIRST_Content").toggleClass("property1 property2");
});

$("div#_SECOND_Menu").click(function () {
  ...
  $("div#_SECOND_Content").toggleClass("property1 property2");
});

Now that the solution works as supposed to i can unleash my passion for code hygiene. The immediate question, the answer to which i can’t really see is how to go about {see title here}. I’d like to perform something along the lines of this.

$("div#_" + MAGIC_MARKER + "_Menu").click(function () {
  ...
  $("div#" + MAGIC_MARKER+ "Content").toggleClass("property1 property2");
});

That way i would be able to neatly compact the code, still keeping it readable. Suggestions?

Answer 1

First of all, instead of:

$("div#_FIRST_Menu")

use simply:

$("#_FIRST_Menu")

It’s simpler and faster.

Now, the correct way to do it would be to add a class to all of those divs that you want to select. For example if you have:

<div id="_FIRST_Menu" class=menu> ... </div>
<div id="_FIRST_Content" class=content> ... </div>
<div id="_SECOND_Menu" class=menu> ... </div>
<div id="_SECOND_Content" class=content> ... </div>

then you can just use this:

$("div.menu").click(function () {
    ...
});

and inside that function you can use for example:

    $(this).next().toggleClass("property1 property2");

to get the next sibling, or some other function to find the correct element. You didn’t show your HTML so I don’t know how it exactly looks like.