Question

我正在尝试使用每个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>

Answer 1

你需要在.thumb上使用.each函数。类似的东西：

$(document).ready(function(){
   $('.thumb').each(function(){
       $(this).append($('<img>').attr({"src":[thumbnails[thumb]],}));
   });
});

Answer 2

你的循环专注于错误的元素。您将img标记附加到thumb类。所以，img标签位于同一个元素中。你应该在循环中创建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);
});

可能是错误但您应该观看缩略图元素。我无法编写代码来测试。但我认为逻辑必须是这样的。

Answer 3

如果你想要那个精确的结构，我使用普通的JavaScript做了一个演示。输入一个数字，thumbClone()函数将生成那么多。您可以轻松地使用现有代码调整此功能。我匆忙，可能需要重构，抱歉。： - \

DEMO

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

Answer 4

你需要使用每个循环来获取每个类而不是只获得下面的一个类是每个循环的语法

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

在你的情况下

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

Answer 5

看起来您需要为每个图像创建整个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.
}

jQuery为每个div添加一个img

5 个答案: