Question

我想动态地将图像插入到bxslider中。我现在能够从ajax函数获得结果，并在检查器的网络选项卡中显示如下：

[{nombre: "gato", imagen: "/media/1swGj9_7oxrYGA.jpg", duracion: "2000"},…]
0 : {nombre: "gato", imagen: "/media/1swGj9_7oxrYGA.jpg", duracion: "2000"}
1 : {nombre: "lay", imagen: "/media/layout_53hUG5g.png", duracion: "2000"}
2 : {nombre: "lol", imagen: "/media/IMG_194935_jkGCdbp.jpg", duracion: "2000"}

我的HTML

<div class="wrapper">
    <ul class="bxslider" id="datos">
<!--     {% for img in imagenes %}
        <li id="images">
            <img src="{{ img.imagen.url }}" data-id="{{ img.id }}" >
        </li>
    {% endfor %} -->
    </ul>
</div>

我的JS看起来像这样：

<script>
    $('.bxslider').bxSlider({
        onSliderLoad: function(){
        console.log('<--------------------- se dispara el evento? ');
        $.ajax({
            url: '/image/busqueda',
            type: 'get',
            datatype: 'json',
            success : function(data){
                var html = ""
                for(var i = 0 ; i < data.lenght; i ++){
                    html += '<li><img src="'+ data[i].fields.imagen + '" data-id="' + data[i].fields.id + '"/></li>';
                }
                $('#datos').html(html);
            }
        });
      }

我无法让<li><img src="" data-id=""/></li>显示在#datos元素内或任何地方。

Answer 1

在初始化滑块之前，您可能需要填写html列表：

$.ajax({
      url: '/image/busqueda',
      type: 'get',
      datatype: 'json',
      success : function(data){
          var html = ""
          for(var i = 0 ; i < data.length; i ++){
              html += '<li><img src="'+ data[i].fields.imagen + '" data-id="' + data[i].fields.id + '"/></li>';
          }
          $('#datos').append(html);
          $('.bxslider').bxSlider();
      }
});

如何使用ajax函数的结果创建一个html元素

1 个答案: