时间戳

首页 > 解决方案 > 将图像从 DB 附加到 jQuery 中的 div 中

javascript - 将图像从 DB 附加到 jQuery 中的 div 中

问题描述

我正在尝试使用 jQuery append 将我的数据库中的特定假日包的图像显示到滑块中。我的滑块在一个模态中，这个模态是从 javascript 函数中显示的。但我只将一张图片放入幻灯片中。我正在使用 while 循环来迭代图像数组，并将其添加到 div 中innerhtml。我不知道我要去哪里。谁能帮帮我吗？

这是我的代码：

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

php

<?php
include_once("index.class.php");
$objScr = new INDEX(); 
if(isset($_POST['uaeid'])) {
  $uaeid=$_POST['uaeid'];

  $rslthlydata = $objScr->getUaedata($uaeid);       //get holiday details
  $rowuaedetails = $rslthlydata->fetchAssoc();
  $resultimages= $objScr->getUaeholyImages($uaeid);   //get images

  while($resultimg=$resultimages->fetchAssoc()) {
    $dataimg[]=$resultimg;
  }
  echo json_encode(array($rowuaedetails,$dataimg)) ;
}

html

<div class="modal fade" id="holiday-details" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">CLOSE <img src="images/close-btn.png" alt=""></button>
      <div class="modal-body">
        <!--<section class="banner detailed"></section> -->
        <div class="owl-carousel owl-theme" id="detail-banner" >
          //this is the slider
        </div>  
        <div class="details">
          <h3 class="top-line" id="uaetitle"></h3>
          <h4 id="subtitle"></h4>
        </div>
      </div>
    </div>
  </div>
</div>

编辑 1

我也试过append。当我追加时，我得到了整个图像，但它没有显示为滑块

$('#detail-banner').append('<div class="item"><img src="../sysimages/origimages/'+imgarray[i]+'" alt=""></div>');

标签： javascriptphpjquery

解决方案

试试这个，不需要混合纯 JS 和 jQuery。选择一个并坚持下去；）

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

    });
  }

});

推荐阅读