0

我想为我通过ajax调用并加载到div中的json数据创建一个滑块。我正在使用 slick 库来做到这一点。但它不起作用。这是代码。ajax 调用并将其加载到 div 中。

$.ajax({
    url:"{% url 'paper-api:PaperDetails' %}",
    method:"GET",
    success: function(data){
        var numTests = 0;
        $.each(data, function(key,value){
            var numberTests = key;
            numTests = 1 + numTests
            var topics = value.topics.toString()
            var all_topics = topics.replace(/,/g,"<br>");
            $(".testSlider").after(
                "<div class='col-sm-2 col-md-4 slide'   id ='newTests'>"+
                    "<div class='thumbnail'>"+      
                        "<div class='caption'>"+
                            "<h3 class='text-center' style='font-weight:bold;'>"+value.subject+"</h3>"+
                            "<h4 class='text-center'>"+value.num_questions+' questions'+" </h4>"+
                            "<h4 class='text-center'>Created By:  </h4>"+
                            "<h4 class='text-center'><strong>"+value.creator+"</strong>  </h4>"+
                            "<h4> Topics </h4>"+
                            "<ul id="+key+"newTopics>"+all_topics+"</ul>"+
                            "<button name='test_id' value="+key+" onclick='loadTopics("+key+")' class='btn btn-success' id="+key+"testID>"+"Show all topics"+"</button>"+"<br>"+"<br>"+
                            "<div class='text-center'>"+
                                "<form action = {% url 'QuestionsAndPapers:conductTest' %} method='get'>"+
                                    "<button type='submit' name='onlineTestid' class='btn btn-primary' value="+key+" onclick='testTake()'>"+"Take Test"+"</button>"+
                                "</form>"+
                            "</div>"+
                        "</div>"+
                    "</div>"
            )
        });
    },
    complete: function(data){
        $('.testSlider').slick();
        $("#tests").hide();
    },
    error: function(data){
    }               
});

现在这里是正文代码：

<div class='testSlider'>
</div>

这是光滑滑块的javascript：

$('.testSlider').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
});

它仍然无法正常工作。 但是，如果我手动将 div 添加到 testSlider div，那么它就会开始工作。这就是为什么我怀疑ajax加载的原因。

4

3 回答 3

0

谢谢你们的回答！但我找到了一个可行的解决方案。我使用 .after 加载数据，并在光滑的滑块 div 之后创建了 div。取而代之的是更改后追加在光滑的滑块 div 内创建 div，然后它可以工作。

于 2018-06-20T08:38:15.893 回答
0

你尝试调用 slick 成功：function(){//call slick}

$.ajax({
    url:"{% url 'paper-api:PaperDetails' %}",
    method:"GET",
    success: function(data){
        var numTests = 0;
        $.each(data, function(key,value){
            var numberTests = key;
            numTests = 1 + numTests
            var topics = value.topics.toString()
            var all_topics = topics.replace(/,/g,"<br>");
            $(".testSlider").after(
                "<div class='col-sm-2 col-md-4 slide'   id ='newTests'>"+
                    "<div class='thumbnail'>"+      
                        "<div class='caption'>"+
                            "<h3 class='text-center' style='font-weight:bold;'>"+value.subject+"</h3>"+
                            "<h4 class='text-center'>"+value.num_questions+' questions'+" </h4>"+
                            "<h4 class='text-center'>Created By:  </h4>"+
                            "<h4 class='text-center'><strong>"+value.creator+"</strong>  </h4>"+
                            "<h4> Topics </h4>"+
                            "<ul id="+key+"newTopics>"+all_topics+"</ul>"+
                            "<button name='test_id' value="+key+" onclick='loadTopics("+key+")' class='btn btn-success' id="+key+"testID>"+"Show all topics"+"</button>"+"<br>"+"<br>"+
                            "<div class='text-center'>"+
                                "<form action = {% url 'QuestionsAndPapers:conductTest' %} method='get'>"+
                                    "<button type='submit' name='onlineTestid' class='btn btn-primary' value="+key+" onclick='testTake()'>"+"Take Test"+"</button>"+
                                "</form>"+
                            "</div>"+
                        "</div>"+
                    "</div>"
   
            )
        });
          //call slick
        $('.testSlider').slick({
                infinite: true,
                slidesToShow: 3,
                slidesToScroll: 3
         });
        
    }      
});

于 2018-06-19T12:49:00.777 回答
0

</div>您的 ajax 回调函数中缺少关闭：

$.ajax({
    url:"{% url 'paper-api:PaperDetails' %}",
    method:"GET",
    success: function(data){
        var numTests = 0;
        $.each(data, function(key,value){
            var numberTests = key;
            numTests = 1 + numTests
            var topics = value.topics.toString()
            var all_topics = topics.replace(/,/g,"<br>");
            $(".testSlider").after(
                "<div class='col-sm-2 col-md-4 slide'   id ='newTests'>"+
                    "<div class='thumbnail'>"+      
                        "<div class='caption'>"+
                            "<h3 class='text-center' style='font-weight:bold;'>"+value.subject+"</h3>"+
                            "<h4 class='text-center'>"+value.num_questions+' questions'+" </h4>"+
                            "<h4 class='text-center'>Created By:  </h4>"+
                            "<h4 class='text-center'><strong>"+value.creator+"</strong>  </h4>"+
                            "<h4> Topics </h4>"+
                            "<ul id="+key+"newTopics>"+all_topics+"</ul>"+
                            "<button name='test_id' value="+key+" onclick='loadTopics("+key+")' class='btn btn-success' id="+key+"testID>"+"Show all topics"+"</button>"+"<br>"+"<br>"+
                            "<div class='text-center'>"+
                                "<form action = {% url 'QuestionsAndPapers:conductTest' %} method='get'>"+
                                    "<button type='submit' name='onlineTestid' class='btn btn-primary' value="+key+" onclick='testTake()'>"+"Take Test"+"</button>"+
                                "</form>"+
                            "</div>"+
                        "</div>"+
                    "</div>"
// -->  Missing "</div>" goes here  <--
            )
        });
    },
    complete: function(data){
        $('.testSlider').slick();
        $("#tests").hide();
    },
    error: function(data){
    }               
});
于 2018-06-19T12:29:22.383 回答