javascript - 使用 ajax 在 bootstrap carousel 上附加数据

Question

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

这是我的 Blade 代码，我使用 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 篇文章附加到 Bootstrap 传送带上

$('#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 成功函数中以显示在引导轮播上

谢谢

Answer 1

您可以遍历从后端返回的 jsons，并使用 += 将其附加到某个变量中。最后，使用 $( html).insertAfter('#carousela .carousel-item:last') 这将在最后一张幻灯片之后插入新幻灯片。

演示代码:

$(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>