Javascript Jquery$。处理数组的每个循环

我在jquery中处理一个对象内的URL数组，我已经快完成了，但是我遇到了一个小问题

我已经将下面的循环绑定到一个单击函数，当用户单击一张照片（在[location]）时，下面应该加载一组相应的照片，这些照片存储在一个数组中，我可以成功地访问正确对象中的数组，但它不是按顺序插入URL，而是将每个URL插入到每个照片中，并用逗号分隔

i、 e而不是：

img src=“[0]”

，

img src=“[1]”

，

img src=“[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>');
});

我收到了：

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

$。每个（相册[位置]。照片，函数（索引，val）{
$（“#”+封面id+”）。追加（“”+位置+“”）；
});

我想我可以用另一个循环来解决这个问题，但由于每个循环都使用$来解决这个问题，所以看起来很笨拙

---

如果您有任何帮助，我们将不胜感激

我相信您会希望将

替换为

我还要补充的是，看起来您在重复的元素中重用ID，这几乎肯定会造成问题，例如，如果您想在同一页面中运行两次图像替换。它也违反了HTML规范。
我相信您会想用

我还要补充的是，看起来您在重复的元素中重用ID，这几乎肯定会造成问题，例如，如果您想在同一页面中运行两次图像替换。这也违反了HTML规范。
您必须使用$each的参数

有两种方法，使用索引或值

 $.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（相册[location].照片，函数（index，val）{$（'#'+cover_id+''）。追加（''+location+''）；}）；

或

$.each（相册[location].照片，函数（index，val）{$（'#'+cover_id+''）。追加（''+location+''）；}）；
您必须使用$each的参数

有两种方法，使用索引或值

 $.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（相册[location].照片，函数（index，val）{$（'#'+cover_id+''）。追加（''+location+''）；}）；

或

$.each（相册[location].照片，函数（index，val）{$（'#'+cover_id+''）。追加（''+location+''）；}）；
在即将完成循环时，预先准备主容器一次并将其关闭，下面是更清晰的代码

$.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>');
    }
});

$。每个（相册[位置]。照片，函数（索引，val）{
如果（索引==0）{
$（“#”+封面id+”）。附加（“”）；
}
$（“#”+封面id+”）。附加（“”）；
如果（相册[location].photos.length>=（索引-1））{
$（“#”+封面id+”）。追加（“”+位置+“”）；
}
});
在即将完成循环时，预先准备主容器一次并将其关闭，下面是更清晰的代码

$.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>');
    }
});

$。每个（相册[位置]。照片，函数（索引，val）{
如果（索引==0）{
$（“#”+封面id+”）。附加（“”）；
}
$（“#”+封面id+”）。附加（“”）；
如果（相册[location].photos.length>=（索引-1））{
$（“#”+封面id+”）。追加（“”+位置+“”）；
}
});
问题：您将整个数组本身指定为源，而不是索引中的特定数组。

解决方案：使用回调函数返回的
val
变量。该
val
指向索引中的特定项，并在每次迭代中递增以指向下一项

问题：您将整个数组本身指定为源，而不是索引中的特定数组。

解决方案：使用回调函数返回的
val
变量。该
val
指向索引中的特定项，并在每次迭代中递增以指向下一项

这正是我一直缺少的！我一直在努力让我的头脑围绕着对象遍历和每个循环，这就是关键！非常感谢：）但是在给出了解决方案之后，我给了您调试它的正确方法。打开Chrome developer tool或浏览器中的任何开发工具（我更喜欢Chrome来完成这项工作），然后在$的“内部”一行将其断开。每一行，您都可以看到所有传递的值，在哪里是错误的。也许你必须把你的代码分成几行才能读得好这正是我一直缺少的！我一直在努力让我的头脑围绕着对象遍历和每个循环，这就是关键！非常感谢：）但是在给出了解决方案之后，我给了您调试它的正确方法。打开Chrome developer tool或浏览器中的任何开发工具（我更喜欢Chrome来完成这项工作），然后在$的“内部”一行将其断开。每一行，您都可以看到所有传递的值，在哪里是错误的。也许你必须把代码分成几行才能读得好