Question

我正在使用jquery中的一个对象内的一系列URL，我正处于一个非常接近完成的位置，但是我遇到了一个小问题。

我将以下循环绑定到点击功能，当用户点击照片（在[位置]）时，下面应该加载一堆相应的照片，这些照片存储在一个数组中，我可以成功访问数组在正确的对象中，但不是按顺序插入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，这似乎很笨拙。

非常感谢任何帮助

Answer 1

你必须使用$ .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(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>'); });

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

Answer 3

我相信您希望将<img src='+albums[location].photos+'...替换为<img src='+val+'...

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

Answer 4

问题：您将整个数组本身指定为源而不是索引处的特定数组。 <img src='+albums[location].photos+'

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

<img src='+val+'

Jquery $ .each循环处理数组

4 个答案: