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

Question

我有一个包含图像的对象数组(如下)。我需要将每个图像附加到特定的 <div>它位于容器“ slider 容器”内部。

JSON:

{
"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
}]
}

HTML:

<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>

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

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

.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>

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>