Confused about initialising a jQuery plugin with an array

JavaScript
1

Hi All,

I’ve not been using jQuery for long and I’m bashing my head against a wall trying to figure out how to initialise a jQuery plugin with a localized array that came from WordPress.

I know there is something fundamental I’m missing, but as soon as I Google anything with ‘jQuery’ or ‘plugin’ I get lots of results about creating jQuery plugins, and so I’m not even sure what to search for to find a solution.

So … specifically I am using Backstretch to switch background images as each menu item is hovered over.

So far so good I hope.

In the prototype I had the following code which worked perfectly, and every page had custom code for the mouseleave to work:


function coBackstretch(){

	jQuery( '.menu-home' ).mouseenter( function(e) {
		jQuery.backstretch( 'http://localhost/site/img/background-home.jpg', {
			fade: 500
		});
	});
	jQuery( '.menu-features' ).mouseenter( function(e) {
		jQuery.backstretch( 'http://localhost/site/img/background-features.jpg, {
			fade: 500
		});
	});
	jQuery( '.menu-commercials' ).mouseenter( function(e) {
		jQuery.backstretch( 'http://localhost/site/img/background-commercials.jpg', {
			fade: 500
		});
	});
	jQuery( '.menu-news-press' ).mouseenter( function(e) {
		jQuery.backstretch( 'http://localhost/site/img/background-news-press.jpg', {
			fade: 500
		});
	});
	jQuery( '.menu-contact' ).mouseenter( function(e) {
		jQuery.backstretch( 'http://localhost/site/img/background-contact.jpg', {
			fade: 500
		});
	});
	jQuery( '.menu-main' ).mouseleave( function(e) {
		jQuery.backstretch( 'http://localhost/site/img/background-home.jpg', {
			fade: 500
		});
	});
}

Now using an array I want to recreate this dynamically as I don’t know how many menu items my client will create in the future.

Using WP I have a multidimensional associative array containing page name and the image url which is accessed by the localized variable ‘pageData’.
The idea is the function loops through the array and creates all the code for each button to get Backstretch working, but it doesn’t work. I know I have missed something fundamental but I can’t find what it is, I’m at a complete loss and I’ve been staring at this for 2 days and I’m starting to confuse myself :frowning:


function coBackstretch(){

	for ( var i = 0; i < pageData.length; i++ ) {

		jQuery( '.menu-' +pageData[i]['name'] ).mouseenter( function(e) {
			jQuery.backstretch( pageData[i]['image'], {
				fade: 500
			});
		});
	};

	jQuery( '.menu-main' ).mouseleave( function(e) {
		jQuery.backstretch( pageCurrentData[0], {
			fade: 500
		});
	});
};

When hovering over buttons I get the error “Uncaught TypeError: Cannot read property ‘image’ of undefined”, which I’m guessing happens because when backstretch is called, the pageData information is now missing as the for loop has already finished.

I feel that I am barking up the wrong tree and that I should be doing this in a completely different way, at the moment this is all relative to the Backstretch plugin but the theory would apply to other plugins I want to create too.

I think where I’ve been staring at the problem so long my brain is just refusing to process any of it, so it’s starting to get quite frustrating.

I’m hoping someone can help me out with this or point me in the right direction.

Any help would be massively appreciated as this is the last part of a mammoth puzzle I’ve been gradually solving.

Thanks in advance for any advice/help

2

Well literally 3 hours later I solved it, I should have been using .each() to loop through the array.

The worst part is, it was dead easy once I understood what was going wrong. :rolleyes:
The .each loop remembers!! It remembers I tell ya!



function coBackstretch()
	jQuery.each( pageData, function(i, val) {

		jQuery( '.menu-item-' +pageData[i]['name'] ).mouseenter( function(e) {
				jQuery.backstretch( pageData[i]['image'], {
				fade: 500
			});
		});
	});

	jQuery( '.menu-main' ).mouseleave( function(e) {
		jQuery.backstretch( pageCurrentData[0], {
			fade: 500
		});
	});

So yeah, thanks anyway but I eventually did it :smiley:

Yay me!