[jQuery] Re: JQuery events and a possible scoping error on my part?

Charlie Sat, 04 Jul 2009 07:17:06 -0700

Cleaner if you can use a class on the links. Assume they now have class "dataReveal".

i=1;
$(".dataReveal").each(function () {
        var actOnElem = "#dataToReveal" +i;
           $(this).click( function() {
           $(actOnElem).slideDown();
            return false;
         });
        i++;
     });

olsch01 wrote:

OK, I guess this is one possible solution:

$('a[id^=dataRevealLink]').each(function(){
		var eventElemId = $(this).attr('id');
		var eventElemIdNo = eventElemId.substring(14, eventElemId.length);
		var actOnElem = $('#dataToReveal' +eventElemIdNo);
		$(this).click(function() {
			actOnElem.slideDown();
			return false;
		})
});


Cheers

On 4 Jul., 12:59, olsch01 <ollo...@web.de> wrote:

Hi,

I'm not a JS/jQuery expert, so as a quick test I added alert
(actOnElem); inside your $(eventElem).click( function(), and the
result always was #dataToReveal12.

As mentioned, I am not an expert and still learning myself, but I
think on dom ready the loop simply starts running until i equals 12.
And it's not until then, that the click function comes into play.
That's all I can say at the moment. If I have more time later, I will
look into this again.

Cheers

On 4 Jul., 03:59, bsenftner <bsenft...@earthlink.net> wrote:

Just learning _javascript_ & JQuery, but an experienced developer, I've
created a page with a series of elements that use the .slideDown() and
.slideUp() functions to reveal and hide the different areas of content on
the page.

To facilitate this, the page's html uses links with ids similar to: {
"dataRevealLink1", "dataToReveal1", "dataHideLink1" }. Clicking on a
"data-reveal-link" causes a .slideDown() animation on "data to reveal", with
appropriate reverse logic attached for the data hiding as well.

The page in question has 12 such sections, and writing the script long form
(no loops) works fine. However, I would like to generalize this logic, but
my first attempt at a loop to attach the DOM element callbacks does not
work, and I suspect it's a scoping issue with _javascript_:

     for (var i = 1; i <= 12; i++) {
         var eventElem = "#dataRevealLink" + i;
         var actOnElem = "#dataToReveal" + i;

         $(eventElem).click( function() {
         &nbsp&nbsp                   $(actOnElem).slideDown();
         &nbsp&nbsp                   return false;           // prevents
the link from processing this click
         &nbsp&nbsp});
     }

I suspect that in the above logic, the mouse-click callback is attaching to
the dataRevealLink1-12 fine, however once inside the callback, "actOnElem"
is not what I'm expecting - possibly due to the scope of actOnElem? I'm not
entirely sure...

I've added console.log() calls to the above logic, and everything is as I
expect during the above looping, but I am never getting any of the callbacks
to run, so I can never see any console.log() output from inside a
mouse-click handler...

Any advice anyone?

--
View this message in context:http://www.nabble.com/JQuery-events-and-a-possible-scoping-error-on-m...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

[jQuery] Re: JQuery events and a possible scoping error on my part?

Reply via email to