Append 带有 ajax 的引导轮播数据

Question

我想问我如何在引导轮播上显示 append ajax 数据。 2 post-show on bootstrap carousel 当页面第一次加载然后如果有人点击下一个箭头引导轮播幻灯片并显示接下来的 2 个帖子我每次点击 ajax 得到 2 个帖子现在我想 append 下 2 个帖子在引导轮播等等这样的

这是我的刀片代码，我在其中使用 foreach 在页面加载时显示 2 个帖子，例如我在这里显示帖子 1 和 2

<div id="carousela" class="carousel slide" data-touch="false" data-interval="false">
    <div class="carousel-inner">
    @foreach($magazine->chunk(2) as $magazines)
        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
        @foreach($magazines as $row)
            <div class="row no-gutters m-0 p-0">
                <div class="col-md-2 col-sm-12">
                    <img  src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
                </div>
                <div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
                    <h4 class="text-light m-0 p-0">{{$row->title}}</h4>
                    {{($row->magazine_des) ? $row->magazine_des: ''}}
                    <div><a href="{{$row->links}}" class="text-center text-warning float-right">{{__('Read More')}}</a></div>
                </div>   
            </div>
        @endforeach
        </div>
    @endforeach
    </div>
</div>

now I'm using onclick function to get the next 2 posts here's ajax code and with this code, i'm getting post 3 and 4 now I want to append these 2 posts on the bootstrap carousel

$('#nextclick').on('click',function(){
    var val = $('#hidden').val();
    var data = {val:val}
    $.ajax({
        url: "{{url('/user/nextmagazine')}}",
        method: 'get',
        data: data,
        success: function(data){
            $('#hidden').val(parseInt(val) + parseInt(2));
            
        }
    })
})

这是我在 onclick 之后的结果

如果有人可以帮助我如何 append ajax 成功 function 中的数据显示在引导轮播

谢谢

Answer 1

您可以循环使用从后端返回的 jsons 和 append 在某个变量中使用+= 。最后，使用$(html).insertAfter('#carousela.carousel-item:last')在轮播中添加生成的 html 这将插入新在最后一张幻灯片之后滑动。

演示代码：

 $(document).ready(function() { $("#carousela").carousel(); //using `one` just for demo change it to `on` $('#nextclick').one('click', function() { /* var val = $('#hidden').val(); success: function(data){ //your other codes.. $('#hidden').val(parseInt(val) + parseInt(2));*/ //suppose data return look like this.. var data = [{ "id": 3, "title": "Something3", "magazine_sys_file_name": "somehting", "link": null }, { "id": 4, "title": "Something4", "magazine_sys_file_name": "somehting", "link": null }] if (data.length > 0) { var html = "" //loop $(data).each(function(i, v) { //generate htmls// html += ` <div class="carousel-item"> <div class="row no-gutters m-0 p-0"> <div class="col-md-2 col-sm-12"> <img src="/uploads/${v.magazine_sys_file_name}" class="img-thumbnail border-0 p-0" alt="" srcset=""> </div> <div class="col-md-10 col-sm-12 px-4 m-0 m-mb"> <h4 class="text-light m-0 p-0">${v.title}</h4> <div><a href="${v.links}" class="text-center text-warning float-right">{{__('Read More')}}</a></div> </div> </div> </div>` }) //insert new html after last slide $(html).insertAfter('#carousela.carousel-item:last') } /*} })*/ }) });

 #carousela{ background:black }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div id="carousela" class="carousel slide" data-touch="false" data-interval="false"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row no-gutters m-0 p-0"> <div class="col-md-2 col-sm-12"> <img src="{{(?empty($row->magazine_sys_file_name). asset('/uploads/':$row->magazine_sys_file_name)?'')}}" class="img-thumbnail border-0 p-0" alt="" srcset=""> </div> <div class="col-md-10 col-sm-12 px-4 m-0 m-mb"> <h4 class="text-light m-0 p-0">Something1</h4> <div><a href="{{$row->links}}" class="text-center text-warning float-right">{{__('Read More')}}</a></div> </div> </div> </div> <div class="carousel-item"> <div class="row no-gutters m-0 p-0"> <div class="col-md-2 col-sm-12"> <img src="{{(.empty($row->magazine_sys_file_name): asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset=""> </div> <div class="col-md-10 col-sm-12 px-4 m-0 m-mb"> <h4 class="text-light m-0 p-0">Something2</h4> <div><a href="{{$row->links}}" class="text-center text-warning float-right">{{__('Read More')}}</a></div> </div> </div> </div> <a class="carousel-control-prev" href="#carousela" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#carousela" data-slide="next" id="nextclick"> <span class="carousel-control-next-icon"></span> </a> </div> </div>