logo标签列表

jQuery将图片添加到每个div

javascriptjqueryhtml
4
我试图在每个 thumb 类中显示缩略图，但当前输出的结果是图像在 href 中循环。 div，href 和 img 的顺序必须不变。它看起来像这样 jsfiddle ，但这当然没有完全起作用...。
当前的输出：
<div class ='thumb'>
  <a href="#" rel="1">
    <img src="">
  </a>
    <img src="">
    <img src="">
</div>

所需输出：

<div class ='thumb'>
  <a href="#" rel="1">
    <img src=>
  </a>
</div>

<div class ='thumb'>
  <a href="#" rel="1">
    <img src="">
  </a>
</div>

我的循环：

var thumbnails = [];

$.each(data.productVariantImages,function(key, val){ 
    thumbnails.push(val.imagePath);
});

for(var thumb in thumbnails) {
    $('.thumb').append($('<img>').attr({
        "src":[thumbnails[thumb]]
    }));
}

我是否错误地循环了它？

编辑：

缩略图是动态图库的一部分，基本上每当用户在下拉列表中选择不同选项时，缩略图的来源应相应更改。

当前HTML：

<div class="thumbnail"><?php 
  foreach($skuDetails['productVariantImages'] as $variantImage){
  if(isset($variantImage) && $variantImage['visible']){
 ?>
<div class="thumb">
  <a href="#" rel="1">
     <img src="<?php echo $variantImage['imagePath']; ?>" id="thumb_<?php echo $variantImage['id']; ?>" alt="" />
   </a> 
</div> <?php }}?>
</div>

缩略图的示例数组：

["http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
 "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png"]

示例输出：

<div class="thumbnail">                     
    <div class="thumb">
    <a href="#" rel="1">
     <img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
    </a> 
    </div>      

   <div class="thumb">
    <a href="#" rel="1">
     <img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
    </a> 
    </div>                     
</div>
2
图像标签是一个自闭合标签，<img><img/>的使用是错误的，应该使用<img src="" />。 - Suraj Rawat
你想为缩略图数组的总数生成这个HTML结构吗？每个缩略图只有一张图片？ - Moax6629
1
@zana，你的“thumbnails”数组中的数据与具有“.thumb”类的元素之间的关系不清楚。请展示你的“thumbnails”数组，并解释你希望它们如何匹配（基于它们的索引？）。 - haim770
@Moax6629 它应该通过下拉菜单动态更改，每次用户更改选项时，缩略图应该更改。 - zana
1
@zana，另外，如果您希望它“动态更改”，最好将其添加到问题中（包括所有相关细节）。 - haim770
显示剩余3条评论
5个回答
3
您需要在 .thumb 上使用 .each 函数。类似以下方式：
$(document).ready(function(){
   $('.thumb').each(function(){
       $(this).append($('<img>').attr({"src":[thumbnails[thumb]],}));
   });
});
不需要使用 each()。$('.thumb').append(...) 就可以了。 - haim770
1
@haim770 但这样会将所有图像附加到同一个 div 中，是吗？ - Moax6629
1
不行。请参见http://jsfiddle.net/tf42y91y/。此外，您有一些语法错误（额外的“，”和多余的“[]”）。 - haim770
@Moax6629 看起来它仍然在将内容添加到一个 div 中。 - zana
1
@Moax6629你的代码将追加到.thumb div，但它应该追加到a标签内部。 - Amin Kodaganur
1
你的循环集中在错误的元素上。你将img标签附加到缩略图类上。因此，img标签在同一元素内。你应该在循环内创建具有thumb类的div，并将其附加到缩略图div中。必须像这样：
var div = $(".thumbnail");

$.each(imageArray, function(index, value){
    var elem = "<div class='thumb'><a href='#' rel='1'></div>";
    div.append($elem);
    $('.thumb').append("<img />").attr("src", value);
});

可能是错的，但你应该关注缩略图元素。我无法编写测试代码，但我认为逻辑必须是这样的。

1
如果你想要这个精确的结构，我用普通JavaScript制作了一个演示。输入数字，thumbClone()函数将生成那么多数量的内容。你很可能可以轻松地使用你现有的代码来适应这个函数。我很匆忙，它可能需要重构，抱歉。 :-\

演示

function thumbClone(qty) {
  var main = document.getElementById('main');
  var aFig = document.createElement('figure');
  var aLnk = document.createElement('a');
  var aImg = document.createElement('img');

  aLnk.appendChild(aImg);
  aImg.src = "http://placehold.it/84x84/000/fff.png&text=THUMB"
  aFig.appendChild(aLnk);
  aLnk.setAttribute('rel', '1');
  main.appendChild(aFig);
  aFig.className = "thumb";

  console.log('qty: ' + qty);
  var thumb = document.querySelector('.thumb');
  for (var i = 0; i < qty; i++) {
    var clone = thumb.cloneNode(true);
    thumb.parentNode.appendChild(clone);
  }
}
你的结构看起来正是我需要的，谢谢。我会尝试实现并查看它的效果。 - zana
如果你有一个数组，你可以使用 var qty = array.length 或类似的方法。你也可以像这样为 URL 添加额外的参数：var url = "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png"。 - zer00ne
好的，我明白了。但是我现在还不能尝试，我会在明天早上尝试，谢谢！ - zana
没问题，如果您需要进一步的帮助，请告诉我。 :-) - zer00ne
0

你需要使用每个循环来获取每个类，而不是仅获取一个类。以下是每个循环的语法：

$(selector).each(function(){
       // do your stuff here
)};

就你的情况而言

$('.thumb a').each(function(){
       // do your stuff here
        $(this).append($('<img />').attr('src',[thumbnails[thumb]]);
)};
0

看起来你需要为每个图片创建整个div结构。

让我们使用图片数组的最大长度动态创建以下结构，并添加图片src。

var thumbDivStart = "<div class ='thumb'><a href="#" rel="1">";
var thumbDivEnd = "</a></div>";
var thumbDiv = "";
for (i = 0; i < imageArray.length; i++) { 
    thumbDiv = thumbDivStart + "<img src="+imageArray[i]+"/>"+
               thumbDivEnd;
 //Here you can append the thumbDiv to the parent element wherever you need to add it.
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接