CODEWITHSUNDEEP
javascriptjquerymultidimensional-array
Nikola Sivkov
Nikola Sivkov

Reputation: 2852

Jquery atrr + 2D array issue

i have the following script and i can't find out how to use the value inside car[0]['img'] inside this $('#img2').attr('src',car[0]['img']); im a JS noob so please explain me .. why jquery wont accept the 2d array as string value and run the function , and whats the possible solution of my problem ? 

var id = 0 ;
            var car = new Array();
            car[0]['img'] = "./images/carousel_img_2.jpg";
            car[0]['title'] ="title";
            car[0]['desc'] = 'longer description goes here';
            car[0]['link'] = "http://goeshere.com";
            car[1]['img'] = "./images/carousel_img_3.jpg";
            car[1]['title'] ='title';
            car[1]['desc'] = 'longer description goes here';
            car[1]['link'] = "http://goeshere.com";
            car[2]['img'] = "./images/carousel_img_2.jpg";
            car[2]['title'] ='title';
            car[2]['desc'] = 'longer description goes here';
            car[2]['link'] = "http://goeshere.com";


            function nxt () {   
        $('#img2').fadeOut('slow', function(){

            var img = car[i]['img'] ;
            $('#img2').attr('src',img);
        });
        $('#img2').fadeIn('slow');

            }

Upvotes: 2

Views: 2578

Answers (2)

c_harm
c_harm

Reputation:

JavaScript has separate datatypes for arrays and dictionaries (a fancy term for key/value stores, like associative arrays. Arrays are either defined through the Array() constructor (as you did) or through square brackets [], while dictionaries are defined with curly braces {}.

An example of an array:

var array = ['one', 'two', 'three];
alert ( array[0] ); // "one";

An example of a dictioanry:

var dict = {
    'one': 'one one',
    'two': 'two two',
    'three': 'three three'
}
alert( dict.one ); // "one one"

Try reworking your array definition a bit:

var car = [
    {
        'img': './images/carousel_img_2.jpg',
        'title': 'title',
        'desc': 'longer description goes here',
        'link': 'http://goeshere.com'
    },
    {
        'img': './images/carousel_img_3.jpg',
        'title': 'title',
        'desc': 'longer description goes here',
        'link': 'http://goeshere.com'
    },
    {
        'img': './images/carousel_img_2.jpg',
        'title': 'title',
        'desc': 'longer description goes here',
        'link': 'http://goeshere.com'
    }
];
alert( car[0].img ); // "./images/carousel_img_2.jpg"

Upvotes: 3

Anthony
Anthony

Reputation: 37065

First, get rid of the ./ in front of your img URLs. I doubt it's the source of your current troubles, but it's not going to help you out later. Simply drop the forward slash and go with "images/blah/blah.png".

Next, where is i defined for that nxt() function? Right now I see that id is set to 0 at the top, but there is no i declared. Even if you meant to make it id I'm not sure that it would work since you aren't iterating it inside the function.

I believe you want something like:

 function nxt (i) {   
    $('#img2').fadeOut('slow', function(){
            var img = car[i]['img'] ;
            $('#img2').attr('src',img);
    });
    $('#img2').fadeIn('slow');

 }

Upvotes: 0

Related Questions