Блог

Главная - Вопросы по программированию - Jquery $.каждый цикл, имеющий дело с массивом

Jquery $.каждый цикл, имеющий дело с массивом

#javascript #jquery #arrays

#javascript #jquery #массивы

Вопрос:

Я работаю с массивом URL-адресов внутри объекта в jquery, и я нахожусь на том этапе, когда я очень близок к завершению, однако у меня возникла небольшая проблема.

Я привязал следующий цикл к функции click, когда пользователь нажимает на фотографию (в [location]), ниже ДОЛЖНА загружаться куча соответствующих фотографий, эти фотографии хранятся в массиве, и я могу успешно получить доступ к массиву внутри правильных объектов, но вместо последовательной вставки URL-адресов он вставляет КАЖДЫЙ URL-адрес в каждую фотографию, разделенную запятыми.

т.е. вместо: img src="[0]" , img src="[1]" , img src="[2]" …

Мне представлено: img src="[0],[1],[2]" … 

 $.each(albums[location].photos, function(index, val){
  $('#' cover_id '').append('<div id="' cover_id '" class="thumbnail" style="display:inline-block; padding: 0 25px;"><img src=' albums[location].photos ' id="coverPhoto" height="320" width="320"><figcaption>' location '</figcaption></a></div>');
});

Я думаю, что мог бы решить это с помощью другого цикла, но это кажется неуклюжим из-за использования $.each.

Любая помощь была бы с благодарностью

Ответ №1:

вы должны использовать параметры $.each

у вас есть 2 способа, использовать индекс или значение

  $.each(albums[location].photos, function(index, val){   $('#' cover_id '').append('<div id="' cover_id '" class="thumbnail"
 style="display:inline-block; padding: 0 25px;"><img
 src=' albums[location].photos[index] ' id="coverPhoto" height="320"
 width="320"><figcaption>' location '</figcaption></a></div>'); });

или 

 $.each(albums[location].photos, function(index, val){   $('#' cover_id '').append('<div id="' cover_id '" class="thumbnail"
style="display:inline-block; padding: 0 25px;"><img
src=' val ' id="coverPhoto" height="320"
width="320"><figcaption>' location '</figcaption></a></div>'); });

Комментарии:

1. Это было именно то, чего мне не хватало! Я пытался разобраться в обходе объекта и в каждом цикле, и это было ключевым моментом! Большое спасибо 🙂

2. Но после предоставления решения я также даю вам правильный способ его отладки. Откройте Chrome developer tool или любые инструменты разработчика вашего браузера (я предпочитаю Chrome для этой работы), затем разорвите его на строке «внутри» $.each, вы можете увидеть все передаваемые значения, где ошибка. Возможно, вам придется разбить свой код на несколько строк, чтобы хорошо его прочитать

Ответ №2:

Добавьте основной контейнер один раз и закройте его, когда вы собираетесь завершить цикл, вот более понятный код

 $.each(albums[location].photos, function(index, val){
    if (index == 0) {
       $('#' cover_id '').append('<div id="' cover_id '" class="thumbnail" style="display:inline-block; padding: 0 25px;">');
    }

    $('#' cover_id '').append('<img src=' albums[location].photos[index] ' id="coverPhoto" height="320" width="320">');

    if (albums[location].photos.length >= (index - 1)) {         
       $('#' cover_id '').append('<figcaption>' location '</figcaption></a></div>');
    }
});

Ответ №3:

Проблема: Вы назначаете весь массив в качестве источника, а не конкретный массив с индексом. <img src=' albums[location].photos '

Решение: Используйте val переменную, возвращаемую функцией обратного вызова. Это val указывает на определенный элемент в индексе и увеличивается, указывая на следующий элемент на каждой итерации.

<img src=' val '

Ответ №4:

Я полагаю, вы хотели бы заменить <img src=' albums[location].photos '... на <img src=' val '...

Я бы также добавил, что, похоже, вы повторно используете идентификаторы в своих повторяющихся элементах, что почти наверняка создаст проблемы в будущем, например, если вы захотите дважды выполнить замену изображения на одной странице. Это также нарушает спецификацию HTML.