This question is partially about unobtrusive javascript in general,
but with specific reference to jQuery syntax. I am a long-time
javascript programmer, but a total jQuery noob.
I am attempting to use jQuery to replace onclick handlers that were
previously generated inline as part of a CMS. Most of the tutorials
I've seen for things like "collapsable menus" achieve their generic
effect by referring to object relationships via their position in the
DOM. E.g.
$("img.disclosure").parent().next().hide();
so if you assign that to a click handler, it will "hide the next
sibling of the parent container of the image." That makes the code
pretty generic...it doesn't care how many elements there are, nor
where they are on the page, as long as the location relationship
between the image and the thing-to-hide is "parent().next()".
My question, however, is about relationships between elements that
might be scattered all over the page. Imagine a two-column page, with
a "#left" sidebar column and a "#main" column of content. In the #left
column, some PHP code loops through data results, and spits out a
series of links:
<a id="m1_link" href="#">Module 1</a>
<a id="m2_link" href="#">Module 2</a>
<a id="m9_link" href="#">Module 9</a>
<a id="mN_link" href="#">Module N</a>
The number of results could change, and their identifiers are not
necessarily sequential numbers.
Next, the main column spits out a series of DIVs from a similar data
set:
<div id="m1_div">m1 content...</div>
<div id="m2_div">m2 content...</div>
<div id="m9_div">m9 content...</div>
<div id="mN_div">mN content...</div>
I want to make it so that when a user clicks on m1_link, it toggles
the display of m1_div. There may be a ton of HTML in between the two
groups of output, so I cannot accomplish my tasks with references like
"parent()" or "next()".
I had been creating my onclick handlers inline during the output
generation, by simply adding (in pseudo-code)
onclick="toggleDisplay('m_[identifier]_div')"
to each of the links, where [identifier] was unique to each iteration.
Since I was looping through the data set, I could pass the name of the
appropriate DIV as a parameter to the toggleDisplay() function.
Writing unobtrusive javascript, however, means giving up that
flexibility to pass parameters, so it is not clear to me how to make
jQuery understand that there is a relationship between "m1_link" and
"m1_div."
The only solution apparent to me is to
1. grab the links and assign a click function to them
2. have the click function get the ID of the link, e.g. "m1_link"
3. extract the "base name" from the ID, e.g. "m1_link".replace
("_link","") = "m1"
4. append "_div" to the base name and use "m1_div" to select the
appropriate DIV
That would work fine, but it involves parsing the ID for a name
component that is "common" to the link and the DIV.
Is there no more efficient way to accomplish the same thing? The same
issue could be even more complex, for example, clicking on one of the
links would
a. toggle display of the appropriate DIV
b. alter the SRC attribute of an image at the top of the page
c. add a background color to the appropriate section of a navigation
menu
The one thing I want to avoid is adding a class for each different
base name, so solutions like class="m1" won't help. I refuse to litter
my code with bogus classes.
I'm really just wondering if there's a more obvious solution that I'm
missing. Any suggestions?
