使用ajax在bootstrap carousel上附加数据

问题描述

我想问一下如何在 bootstrap carousel 上附加 ajax 数据。第一次加载页面时，在引导轮播上显示 2 后显示，然后如果有人单击下一个箭头引导轮播幻灯片并显示接下来的 2 个帖子，我现在使用 ajax 每次点击都会收到 2 个帖子，我想附加接下来的 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>

现在我正在使用 onclick 函数来获取接下来的 2 个帖子，这里是 ajax 代码，使用此代码，我将收到第 3 和第 4 个帖子，现在我想将这 2 个帖子附加到引导轮播上

$('#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));
            
        }
    })
})

这是我点击后的结果

如果有人可以帮助我如何将这些数据附加到 ajax 成功函数中以显示在引导轮播上

谢谢

解决方法

您可以遍历从后端返回的 jsons 并使用 += 将其附加到某个变量中。最后，使用 $(html).insertAfter('#carousela .carousel-item:last') 在 carousel 中添加生成的 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","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>