Javascript 将DB中的图像附加到jQuery中的div中

我正在尝试使用jqueryappend将我的数据库中的特定假日包的图像显示到滑块中。我的滑块在一个模式中，这个模式是通过javascript函数显示的。但我在幻灯片中只看到一张图片。我使用while循环迭代图像数组，并使用

innerhtml

将其添加到div中。我不知道我要去哪里。有人能帮我吗

这是我的密码：

js

function showDetailsModal(id) {

  $.post('uae-holidaydetails.php',{uaeid:""+id+""},function(data){
    data = jQuery.parseJSON(data);

    var datadet= data[0];
    if(data[1]) {
      var dataimg= data[1];
      var imgarray=[];
      for (index = 0; index < dataimg.length; index++) {
        imgarray.push(dataimg[index].image);
      }
      var i=0;
      while(imgarray[i]){
        document.getElementById("detail-banner").innerHTML='<div class="item"><img src="../sysimages/origimages/'+imgarray[i]+'" alt=""></div>'; //here I am creating the div for slider
        i++;
      }
    }
    document.getElementById("uaetitle").innerHTML= datadet.title;
    document.getElementById("subtitle").innerHTML= datadet.subtitle;
    $('#holiday-details').modal('show');   //modal is shown
  });
}

---

您必须使用+来解析图像数组数据以创建所有图像。您必须使用innerHTML+=来避免替换如下节点的内容

function showDetailsModal(id) {

        $.post('uae-holidaydetails.php',{uaeid:""+id+""},function(data){
        data = jQuery.parseJSON(data);

        var datadet= data[0];
        if(data[1]) {
        var dataimg= data[1];
        var imgarray=[];
        for (index = 0; index < dataimg.length; index++) {
        imgarray.push(dataimg[index].image);
        }
        var i=0;
        var imageContent = "";
        for (var j = 0; j < imgArray.length; i++) {
         imageContent +='<div class="item"><img src="../sysimages/origimages/'+imgarray[j]+'" alt=""></div>'; //here I am creating the div for slider
        }
        }
        document.getElementById("detail-banner").innerHTML = imageContent;
        document.getElementById("uaetitle").innerHTML= datadet.title;
        document.getElementById("subtitle").innerHTML= datadet.subtitle;
        $('#holiday-details').modal('show');   //modal is shown

        });
        }

函数showtailsmodal（id）{
$.post（'uae-holidaydetails.php'，{uaeid:“+id+”}，函数（数据）{
data=jQuery.parseJSON（数据）；
var datadet=数据[0]；
如果（数据[1]）{
var dataimg=数据[1]；
var Imgaray=[]；
对于（索引=0；索引

例如，让我们考虑下面的场景：

var数组=[1,2,3,4]；
对于（var i=1；i您必须使用+对图像数组数据进行压缩以创建所有图像。您必须使用innerHTML+=以避免替换如下节点的内容

function showDetailsModal(id) {

        $.post('uae-holidaydetails.php',{uaeid:""+id+""},function(data){
        data = jQuery.parseJSON(data);

        var datadet= data[0];
        if(data[1]) {
        var dataimg= data[1];
        var imgarray=[];
        for (index = 0; index < dataimg.length; index++) {
        imgarray.push(dataimg[index].image);
        }
        var i=0;
        var imageContent = "";
        for (var j = 0; j < imgArray.length; i++) {
         imageContent +='<div class="item"><img src="../sysimages/origimages/'+imgarray[j]+'" alt=""></div>'; //here I am creating the div for slider
        }
        }
        document.getElementById("detail-banner").innerHTML = imageContent;
        document.getElementById("uaetitle").innerHTML= datadet.title;
        document.getElementById("subtitle").innerHTML= datadet.subtitle;
        $('#holiday-details').modal('show');   //modal is shown

        });
        }

函数showtailsmodal（id）{
$.post（'uae-holidaydetails.php'，{uaeid:“+id+”}，函数（数据）{
data=jQuery.parseJSON（数据）；
var datadet=数据[0]；
如果（数据[1]）{
var dataimg=数据[1]；
var Imgaray=[]；
对于（索引=0；索引

例如，让我们考虑下面的场景：


var数组=[1,2,3,4]；
对于（var i=1；i试试这个，不需要混合纯JS和jQuery。选择一个并坚持它；）

jQuery（文档）.ready（函数（$）{
函数ShowDetailsModel（id）{
$.post（'uae-holidaydetails.php'，{uaeid:id}，函数（数据）{
var data=JSON.parse（数据）；
var dataDet=数据[0]；
如果（数据[1]）{
var dataImg=数据[1]；
var Imgaray=[]；
对于（var index=0；index
试试这个，不需要混合纯JS和jQuery。选择一个并坚持它；）

jQuery（文档）.ready（函数（$）{
函数ShowDetailsModel（id）{
$.post（'uae-holidaydetails.php'，{uaeid:id}，函数（数据）{
var data=JSON.parse（数据）；
var dataDet=数据[0]；
如果（数据[1]）{
var dataImg=数据[1]；
var Imgaray=[]；
对于（var index=0；index
innerHTML替换节点（如果已经存在）的内容。因此，在您的情况下，每次删除图像时，只返回最后一个图像。尝试附加您的内容。我尝试了，我得到了所有图像，但图像不显示为sliderinnerHTML，如果节点的内容已经存在，请替换它。因此，在您的情况下，每次删除图像时，只返回最后一个图像。尝试添加你的内容。我尝试了，我得到了所有的图片，但是图片没有显示为幻灯片谢谢你的回答。它的工作，我得到了所有的图像。但问题是，它不显示为滑块，图像显示一个在另一个之上，而不是滑块。为什么是这样？你必须把它做成多个横幅。它附加了详细的横幅，这是唯一的，但你的数组有多个图像。这实际上是我想要的。我有多个图像，这些图像必须显示为滑块<代码>详细标题
是滑块，
是滑块中的图像。仍然是一样的。感谢您的回答。它的工作，我得到了所有的图像。但问题是，它不显示为滑块，图像显示一个在另一个之上，而不是滑块。为什么是这样？你必须把它做成多个横幅。它附加了详细的横幅，这是唯一的，但你的数组有多个图像。这实际上是我想要的。我有多个图像，这些图像必须显示为滑块
detail banner
是滑块，
是滑块中的图像。仍然是一样的。
$('#detail-banner').append('<div class="item"><img src="../sysimages/origimages/'+imgarray[i]+'" alt=""></div>');

function showDetailsModal(id) {

        $.post('uae-holidaydetails.php',{uaeid:""+id+""},function(data){
        data = jQuery.parseJSON(data);

        var datadet= data[0];
        if(data[1]) {
        var dataimg= data[1];
        var imgarray=[];
        for (index = 0; index < dataimg.length; index++) {
        imgarray.push(dataimg[index].image);
        }
        var i=0;
        var imageContent = "";
        for (var j = 0; j < imgArray.length; i++) {
         imageContent +='<div class="item"><img src="../sysimages/origimages/'+imgarray[j]+'" alt=""></div>'; //here I am creating the div for slider
        }
        }
        document.getElementById("detail-banner").innerHTML = imageContent;
        document.getElementById("uaetitle").innerHTML= datadet.title;
        document.getElementById("subtitle").innerHTML= datadet.subtitle;
        $('#holiday-details').modal('show');   //modal is shown

        });
        }

jQuery(document).ready(function($){

  function showDetailsModal(id) {

    $.post('uae-holidaydetails.php', {uaeid: id }, function(data) {
      var data = JSON.parse(data);
      var dataDet = data[0];

      if(data[1]) {
        var dataImg = data[1];
        var imgArray = [];

        for (var index = 0; index < dataImg.length; index++) {
          imgArray.push(dataImg[index].image);
        }

        var items = "";

        for (var j = 0; j < imgArray.length; i++) {
          items += '<div class="item"><img src="../sysimages/origimages/'+imgArray[j]+'" alt=""></div>';
        }

        $('#detail-banner').append(items);
      }

      $('#uaetitle').append(dataDet.title);
      $('#subtitle').append(dataDet.subtitle);
      $('#holiday-details').modal('show');   //modal is shown

    });
  }

});