JQuery ATRR + 2D-массив проблема

Question

У меня есть следующий скрипт, и я не могу узнать, как использовать значение внутри car [0] ['img'] внутри этого $ ('# img2'). Attr ('src', car [0] [ 'IMG']); Я JS Noob, поэтому, пожалуйста, объясните мне .. почему jquery не принимает 2d массив в качестве строкового значения и запускает функцию, и каково возможное решение моей проблемы?

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

JavaScript имеет отдельные типы данных для массивов и словарей (причудливый термин для хранилищ ключей / значений, таких как ассоциативные массивы. Массивы определяются либо с помощью конструктора Array () (как вы это сделали), либо с помощью квадратных скобок [], тогда как словари определяется фигурными скобками {}.

Пример массива:

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

Пример диктовки:

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

Попробуйте немного переработать определение массива:

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" 

Answer 2

Во-первых, избавьтесь от ./ перед вашими img URL. Я сомневаюсь, что это источник ваших нынешних неприятностей, но это не поможет вам позже. Просто бросьте косую черту и нажмите «images/blah/blah.png».

Далее, где для этой функции nxt() определено i? Прямо сейчас я вижу, что id установлен на 0 сверху, но не объявлено i. Даже если вы хотели сделать это id, я не уверен, что это сработает, поскольку вы не выполняете его внутри функции.

Я полагаю, вы хотите что-то вроде:

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

 }