Javascript 将图像动态添加到滑块jQuery

我有按类别的下拉列表。我有20幅Cat1图像和30幅Cat2图像，以此类推。。 这些图像来自JSON web服务。我已经解析了api，结果内容已经添加到数组中。因此，当从下拉列表中选择Cat1时，图像将正确加载，但当选择cat2时，图像将不显示

我所做的是，当选择categorie时，iam将图像数组发送到此函数，iam是否通过循环将数组中的图像添加到mcts1 div元素来使用图像构造html字符串

function createIcons(imagesArray) {
    console.log(imagesArray);
    var iconsDict = imagesArray;
    var output = '';
    var foo = (iconsDict);
    for (var i = 0; i < iconsDict.length; i++) {
        output += '<img class="icons" id=' + i + ' src=' + foo[i] + ' width="100px" height="100px"/>';
    }
    $("#mcts1").html(output); 

}

这是我的html

<div class="div2">
      <div id="mcts1">

      </div>
    </div>

---

iam使用menucool滑块

您可以动态修改jQuery滑块，因此请按照以下步骤操作

HTML

---

试试这个。。它对我有用

var html = "";
for(var i = 0; i <= images_array.length - 1; i++)
{
    html += "<img src='"+images_array[i]+"' class='sliderImage' id='image_"+i+"' />";
}
$("#slider").append(html);

---

您的代码是否可以这样尝试每次更改清空div，然后追加输出，然后调用此函数ThumbnailSlidermct1\u选项注释您的输出$mcts1.empty；添加幻灯片输出；ThumbnailSlidermct1_选项；输出为：未捕获引用错误：未定义ThumbnailSlider

   <script type=”text/javascript”>
 function addSlides(str)
{ var sliderElm = document.getElementById(“mcts1”); 
sliderElm.innerHTML = str; 
} 
</script>

 addSlides(output);

var html = "";
for(var i = 0; i <= images_array.length - 1; i++)
{
    html += "<img src='"+images_array[i]+"' class='sliderImage' id='image_"+i+"' />";
}
$("#slider").append(html);