Question

我问了关于循环和追加的问题。答案几乎是正确的，但它似乎适用于许多人。

期望的效果如下 -

<div>
<img class="img1">
<img class="img2">
</div>

<div>
<img class="img2">
<img class="img3">
</div>

<div>
<img class="img4">
<img class="img5">
</div>

这是我得到的结果 -

我正在使用json和ajax，但它可能会使事情复杂化。基本上我只需要从数组中取出项目，将它们分成两部分并将每一对放在一个div中。

＆＃13;

var counter = -1,
mainTitle,
imgTitle,
imgLink,
slideIndex;

function populateCars(carId){
  $.ajax({
    type : 'GET',
    url : 'json/data.json',
    data : {
      get_param: 'value'
    },
    dataType : 'json',
    success : function(data){
      mainTitle = data.carInfo.title;
      imgTitle = data.carInfo.carName;
      $('.gallery-slider').empty();
      $('.gallery-sub-slider').empty();

      $('#gallery-head').html(mainTitle);
      $('#gallery-car-type').html(imgTitle);

      $.each(data.carImages, function(i){
        imgLink = data.carImages[i].imgLink;

        $('.gallery-slider').append('<div><img src="' + imgLink + '" class="gallery-img" data-tag="' + i + '"></div>');
        
      });

      var divCount = Math.ceil(data.carImages.length / 2);
      var firstImgIndex;
      var secondImgIndex;
      var firstImg;
      var secondImg;
      
      for (var i = 0; i < divCount; i++) {
        firstImgIndex = i*2;
        secondImgIndex = firstImgIndex + 1;
      
        firstImg = data.carImages[firstImgIndex];
        secondImg = data.carImages[secondImgIndex];
        
        $('.gallery-sub-slider').append('<div class="sub-gallery-item" data-index="' + i + '"></div>');
        $('.sub-gallery-item').append('<img src="' + firstImg.imgLink + '" class="sub-gallery-img" data-tag="' + i + '"><img src="' + secondImg.imgLink + '" class="sub-gallery-img">');

      }

    }
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                <div class="gallery-sub-slider">

                </div>

＆＃13;

Answer 1

这就是你能做到的事情

＆＃13;

for (var i = 0; i < divCount; i=i+2) {
  $('.gallery-sub-slider').append(`<div class="sub-gallery-item" data-index="${i}">
    <img src="${data.carImages[i].imgLink}" class="sub-gallery-img" data-tag="${i}">
    <img src="${data.carImages[i+1].imgLink}" class="sub-gallery-img" data-tag=${i+1}>
  </div>`);
}

＆＃13;

我已使用ES6反引号并使用${}来引用变量。将i值增加 2

希望这会对你有所帮助。

Answer 2

在每次迭代中，您都会创建新的“.sub-gallery-item”。

在整页中选择所有.sub-gallery-item，然后将2个新图片添加到每个中。我想你想把它们添加到新的中。

造成问题的一行是：

$('.gallery-sub-slider').append('<div class="sub-gallery-item" data-index="' + i + '"></div>');
$('.sub-gallery-item').append('<img src="' + firstImg.imgLink + '" class="sub-gallery-img" data-tag="' + i + '"><img src="' + secondImg.imgLink + '" class="sub-gallery-img">');

您可以简化它：

$('.gallery-sub-slider').append('<div class="sub-gallery-item" data-index="' + i + '"><img src="' + firstImg.imgLink + '" class="sub-gallery-img" data-tag="' + i + '"><img src="' + secondImg.imgLink + '" class="sub-gallery-img"></div>');

循环追加太多项目

2 个答案: