Jquery atrr + 2D array issue

Question

Hello , 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');

      }

Answer 1

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');

 }

Answer 2

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"