Question

我想为我通过ajax调用并加载到div中的json数据创建一个滑块。我正在使用光滑的库来这样做。但这不起作用。这是代码。 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的原因。

Answer 1

您的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>"
// -->  Missing "</div>" goes here  <--
            )
        });
    },
    complete: function(data){
        $('.testSlider').slick();
        $("#tests").hide();
    },
    error: function(data){
    }               
});

Answer 2

您尝试成功调用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
         });
        
    }      
});

Answer 3

感谢您的回答！但是我找到了一个可行的解决方案。我正在使用.after加载数据，并且在光滑的div之后创建了div。而是在添加之后进行更改，而不是在光滑的div div内创建div，然后起作用。

为AJAX附加的div创建滑块

3 个答案: