使用 ajax 在 bootstrap 轮播上附加数据

Question

我想问一下如何在 bootstrap 轮播上附加 ajax 数据。 2 post-show 在第一次加载页面时 bootstrap 旋转木马然后如果有人单击下一个箭头 bootstrap 旋转木马幻灯片并显示下一个 2 posts 我是ajax 每次点击获得 2 posts 现在我想在 bootstrap 轮播上附加接下来的 2 posts 等等

这是我的 blade 代码，我在其中使用 foreach 在页面加载时显示 2 posts 例如我在这里显示 post 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 posts 这是 ajax 代码，使用此代码，我现在得到 post 3 和 4 我想要在 bootstrap 轮播

上附加这 2 post

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

谢谢

Answer 1

您可以从后端循环遍历您的 jsons return 并使用 += 将其附加到某个变量中。最后，将生成的 html 添加到您的 carousel 使用 $(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>

使用 ajax 在 bootstrap 轮播上附加数据

Append Data on bootstrap carousel with ajax

javascript

ajax

jquery

laravel

bootstrap-carousel