Question

我有一个包含图像的对象数组（如下）。我需要将每个图像附加到容器“ slider-container”内的特定const fs = require('fs'); const gm = require('gm'); gm('/tmp/img.jpg') .stream('webp') .pipe(fs.createWriteStream('/tmp/img.webp')); gm('/tmp/img.jpg') .toBuffer('webp', (err, buffer) => { fs.writeFile('/tmp/img-buffer.webp', buffer, console.log) })上。

JSON：

        $service    = new Google_Service_Drive($client);

        // Print the names and IDs.
        $optParams = array(
            'fields'    => 'nextPageToken, files(id, name, fileExtension, trashed, webViewLink, mimeType, ownedByMe, parents, fileExtension, webContentLink)',
            'q'         => $folderId . " in parents" // pass the folder id as a string to the variable $folderId
        );

        $results = $service->files->listFiles($optParams);
        $results = $results->getFiles();

HTML：

<div>

上面代码中的注释应该解释我的意思，下面还有使用swiper.js滑块的代码。当您运行代码时，滑块似乎正在以一种奇怪的方式进行初始化。

{
"slideData": [{
    "brand": "http://placehold.it/200x50?text=1" // index 0
}, {
    "brand": "http://placehold.it/200x50?text=2" // index 1
}, {
    "brand": "http://placehold.it/200x50?text=3" // index 2
}]
}

<div class="slider-container">

<div class="swiper-slide">
<!-- image from index 0 should append here (slideData.[0].brand) -->
</div>

<div class="swiper-slide">
<!-- image from index 1 should append here (slideData.[1].brand) -->
</div>

<div class="swiper-slide">
<!-- image from index 2 should append here (slideData.[2].brand) -->
</div>

</div>

var swiper = new Swiper('.swiper-container', {
  loop: true,
  init: false,
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

swiper.on('init', function() {
  var imgObj = {
    "slideData": [{
      "brand": "http://placehold.it/200x50?text=1" // index 0
    }, {
      "brand": "http://placehold.it/200x50?text=2" // index 1
    }, {
      "brand": "http://placehold.it/200x50?text=3" // index 2
    }]
  }

  $('.sy-slide .brand').each(function (idx, div) {
    if (idx > 0) idx--;
    else if (idx == 0) idx++;
    if (idx >= imgObj.slideData.length) idx = 0;
    $(div).append('<img src=' + imgObj.slideData[idx].brand + '></img>');
  });
  
});

swiper.init();

Answer 1

您可以使用querySelectorAll()获取所有div。然后遍历所有元素以从对象数组的正确索引添加图像：

var imgObj = {
  "slideData": [{
      "brand": "http://placehold.it/200x50?text=1" // index 0
  }, {
      "brand": "http://placehold.it/200x50?text=2" // index 1
  }, {
      "brand": "http://placehold.it/200x50?text=3" // index 2
  }]
}

document.querySelectorAll('.swiper-slide').forEach(function(div, idx){
  div.insertAdjacentHTML('beforeend', '<img src='+imgObj.slideData[idx].brand+'></img>');
  //OR
  //div.innerHTML += '<img src='+imgObj.slideData[idx].brand+'></img>'
});

<div class="swiper-slide">
</div>

<div class="swiper-slide">
</div>

<div class="swiper-slide">
</div>

您要求的 jQuery解决方案：

var imgObj = {
  "slideData": [{
      "brand": "http://placehold.it/200x50?text=1" // index 0
  }, {
      "brand": "http://placehold.it/200x50?text=2" // index 1
  }, {
      "brand": "http://placehold.it/200x50?text=3" // index 2
  }]
}

$('.swiper-slide').each(function(idx, div){
  $(div).append('<img src='+imgObj.slideData[idx].brand+'></img>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swiper-slide">
</div>

<div class="swiper-slide">
</div>

<div class="swiper-slide">
</div>

我知道这可能不是解决问题的正确方法，但是您可以将其视为解决方法：

$('.swiper-slide .brand').each(function(idx, div) {
  var i = $(div).parent().attr("data-swiper-slide-index");
  $(div).append('<img src=' + imgObj.slideData[i].brand + '></img>');
});

完整的示例：

var swiper = new Swiper('.swiper-container', {
  loop: true,
  init: false,
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

swiper.on('init', function() {
  var imgObj = {
    "slideData": [{
      "brand": "http://placehold.it/200x50?text=1" // index 0
    }, {
      "brand": "http://placehold.it/200x50?text=2" // index 1
    }, {
      "brand": "http://placehold.it/200x50?text=3" // index 2
    }]
  }

  $('.sy-slide .brand').each(function (idx, div) {
    let i = $(div).parent().attr("data-swiper-slide-index");
  $(div).append('<img src=' + imgObj.slideData[i].brand + '></img>');
  });
  
});

swiper.init();

.swiper-slide {
  text-align: center;
  background: #000;
  color: #fff;
  font-size: 53px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">

<div class="swiper-container">

  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide sy-slide">Slide 1
      <div class="brand"></div>
    </div>
    <div class="swiper-slide sy-slide">Slide 2
      <div class="brand"></div>
    </div>
    <div class="swiper-slide sy-slide">Slide 3
      <div class="brand"></div>
    </div>
    ...
  </div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

相对将对象数组内的索引链接到特定的HTML div

1 个答案: