[Javascript] Help with closures
Alex Turner
Alex.Turner at Project-Network.com
Fri Jan 12 04:33:48 CST 2007
Dood,
I would place call onclick like this:
<span class="click" onclick='toggleMe(this)'>Hide this content</span>
Then the toggle event handler gets a reference to the node from which it was called and hence has no chance of ambiguity :-)
The other way that is also easy - but messier - is the way I did the selectable rows in a table - see nerds-central.blogspot.com
Cheers
AJ
Dr Alexander J Turner
Project Network
+44 (0) 7917 065072
Con Call: 0870 241 3425/3342654#
________________________________
From: javascript-bounces at LaTech.edu on behalf of Bill Moseley
Sent: Thu 1/11/2007 23:57
To: javascript at LaTech.edu
Subject: [Javascript] Help with closures
Or I think this is a closure issue.
I have a really simple and common task (that I'm likely making hard), where I
want to create a hide/show block.
So, the block of HTML looks basically like this:
<div class="hidable">
<div class="content">
<span class="click">Hide this content</span><br />
content here
</div>
<div class="hidden">
<span class="click">Show the content</span>
</div>
</div>
So clicking on "Show" or "Hide", well shows or hides that block with
content.
The problem is when I have two of those blocks clicking on the "hide"
seems to get the right event but is hiding the wrong block.
Here's a working demo:
http://hank.org/hide.html
So, a page can have any number of the above blocks. The javascript
finds the blocks by looking for all "hidable" classes using Prototype's
getElementsByClassName();
The onclick events are assigned to the spans with "click". When the
even first I look at the parentNode's class name to know if should
hide or to show.
Basically in pseudo code I set up the events like so:
for div in get_by_class( 'hidable' ) {
// get <div> elements for the two inner sections
var content_div = get_class( 'content', div );
var hidden_div = get_class( 'hidden', div );
// get the span for setting the events
var show_span = get_class( 'click', content_div );
var hide_span = get_class( 'click', hidden_div );
// closure to call the toggle passing in the two <div>s
var click_event = function(e) {
toggle( e, content_div, hidden_div );
}
Event.observe( show_span, 'click', show_event, false );
Event.observe( hide_span, 'click', show_event, false );
}
Then the event does:
function toggle ( event, content_div, hidden_div ) {
look at event element's parent's class name to determine if should
hide or show.
}
--
Bill Moseley
moseley at hank.org
_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: application/ms-tnef
Size: 8204 bytes
Desc: not available
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20070112/2fac09cf/attachment.bin>
More information about the Javascript
mailing list