Ryan,

To understand Colin's solution, you should read up on event bubbling:
http://www.quirksmode.org/js/events_order.html

Daniel

On Jul 16, 4:06 am, ColinFine <[email protected]> wrote:
> On Jul 12, 5:19 pm, Ryan <[email protected]> wrote:
>
>
>
> > Here is what I want to accomplish. I have a page with a structure like
> > this:
>
> > <div id="jobs">
> >   <h2>Job Category Headline</h2>
> >   <ul>
> >     <li><span title="Show Position Details">Job Title 1</span>
> >     <div class="job-info">
> >         Details
> >         <div class="close" title="Hide Position Details">Hide Position
> > Details</div>
> >     </div>
> >     </li>
> >     <li><span title="Show Position Details">Job Title 2</span>
> >     <div class="job-info">
> >         Details
> >         <div class="close" title="Hide Position Details">Hide Position
> > Details</div>
> >     </div>
> >     </li>
> > </ul>
> > </div>
>
> > Each job-info div is hidden using this:
>
> > $$('.job-info').invoke('hide');
>
> > So far so good. Now, I want to loop through all spans (#jobs ul li
> > span) and add a listener for click. When the span is clicked, the job-
> > info below it should display (just the one below, not all). In
> > addition, within each div there is another div with a class called
> > ".close" which should hide that parent div when clicked.
>
> > It would appear that this is a simple task, but having never worked
> > with prototype, what I've tried so far hasn't worked.
>
> > If anyone could point me in the right direction, I'd appreciate it.
>
> You _could_ set an observer on each span, but it's _much_ better to
> set one on #jobs and delegate.
>
> Something like (off the top of my head, so I'm sure it's not quite
> right, but it should give you the idea.)
>
> $('jobs').observe('click', function (e) {
>   var span = e.findElement('span');
>   if (span) span.show();
>
> });
>
> If there are other spans than these, you could put a class on them and
> add it to the 'findElement'  argument.
>
>
>
> > Thanks,
> > Ryan

-- 
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to