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

Question

我有一个包含图像的对象数组(下图(。我需要将每个图像附加到容器"滑块容器"内的特定<div>。

杰森：

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

上面代码中的注释应该解释我的意思，下面还有使用滑动器.js滑块的代码。运行代码时，滑块似乎以奇怪的方式初始化。

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>