Question

我正在尝试使用jQuery append将我的数据库中特定假日包的图像显示到滑块中。我的滑块在一个模态中，这个模态从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
  });
}

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

Answer 1

试试这个，不需要混合纯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

    });
  }

});

Answer 2

您必须使用+来连接图像数组数据以创建所有图像。您必须使用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

        });
        }

例如，让我们考虑以下情况：

var array = [1,2,3,4];
for(var i=1;i<=array.length;i++){
document.getElementById("test1").innerHTML = i+" ";
}
for(var j=1;j<=array.length;j++){
document.getElementById("test2").innerHTML += j+" ";
}

<div id="test1"></div>

<div id="test2"></div>

将数据从DB附加到jQuery中的div中

2 个答案: