Question

下面是我在jsFiddle上做的一个例子来重新解决我面临的问题。我正在通过ajax加载动态内容后触发init函数来创建滑块。由光滑创建的部分元素和类被添加到DOM但不起作用。

function top_posts(el){
        var reqUrl = 'https://jsonplaceholder.typicode.com/users';
        el.children('.loadspan').html('<i class="fa fa-circle-o-notch fa-spin fa-fw" style="padding: 0;"></i>');
        $.ajax({
            url: reqUrl,
            dataType: 'json',
            }).done(function( data ) {
                el.children('.loadspan').hide();
                if(data != ""){
                		console.log(data);
                    $.each(data, function(index) {
                          var output = '<div class="card-out">' +
                                            '<div class="card-bg" style="background-image: url(https://placeimg.com/640/480/any);"></div>' +
                                            '<div class="card-content">' +
                                                '<div class="card-title">' +
                                                    this.name +
                                                '</div>' +
                                            '</div>' +
                                        '</div>';
                        setTimeout(function() {
                            el.append(output);
                        }, (100 * (index + 1)));
                    });
                    top_slider_init();
                } else{
                    el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>');
                }
                
            }).fail(function(jqXHR, textStatus) {
                el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>');
                console.log("Request failed: " + textStatus);
            });
        return false;
}

  var el = $('.top-posts-slider');
  top_posts(el);


function top_slider_init() {
    $('.top-posts-slider').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        speed: 300,
        adaptiveHeight: false,
        variableWidth: false,
        autoplay: true,
        autoplaySpeed: 3000,
        infinite: true,
        dots: false,
        arrows: false,
        centerMode: false,
        centerPadding: "50px",
        cssEase: "ease-in-out",
        draggable: true,
        fade: false,
        focusOnSelect: false,
        pauseOnFocus: true,
        pauseOnDotsHover: false,
        vertical: false,
        verticalSwiping: false,
        rtl: false,
    });
}

.card-out {
  height: 200px;
  width: 100%;
  position: relative;
}
.card-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: cover;
}
.card-title {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="top-posts-slider">

<div class="loadspan"></div>
</div>

任何帮助表示赞赏：）

Answer 1

您需要删除setTimeout，因为您的内容会在加载浮动后附加到top-posts-slider：

function top_posts(el){
        var reqUrl = 'https://jsonplaceholder.typicode.com/users';
        el.children('.loadspan').html('<i class="fa fa-circle-o-notch fa-spin fa-fw" style="padding: 0;"></i>');
        $.ajax({
            url: reqUrl,
            dataType: 'json',
            }).done(function( data ) {
                el.children('.loadspan').hide();
                if(data != ""){
                        console.log(data);
                    $.each(data, function(index) {
                          var output = '<div class="card-out">' +
                                            '<div class="card-bg" style="background-image: url(https://placeimg.com/640/480/any);"></div>' +
                                            '<div class="card-content">' +
                                                '<div class="card-title">' +
                                                    this.name +
                                                '</div>' +
                                            '</div>' +
                                        '</div>';
                        //remove settimeout
                        el.append(output);
                    });
                    top_slider_init();
                } else{
                    el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>');
                }

            }).fail(function(jqXHR, textStatus) {
                el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>');
                console.log("Request failed: " + textStatus);
            });
        return false;
}

https://jsfiddle.net/ywuu006w/

Answer 2

首先，在滑块容器内部执行的loadspan div是什么？当你光滑的时候，它会尝试将其用作幻灯片。

除此之外，看起来你在构建的标记和初始化的滑块之间存在竞争条件。在内容实际位于容器内部之前，正在初始化滑块。我也认为你不需要那个setTimeout函数，你应该像

那样构造它

    var output = '';
    $.each(data, function(index) {
         output += 'All of your markup';
    }
    el.append(output);               
    top_slider_init();

slickslider没有处理动态内容

2 个答案: