时间戳

首页 > 解决方案 > jQuery - 动态删除和添加新的轮播项目后，数字应该重新排序

jquery - jQuery - 动态删除和添加新的轮播项目后，数字应该重新排序

问题描述

我正在动态创建 Bootstrap 轮播幻灯片，删除选项为Remove item 1，Remove item 2 etc... 用于新创建的幻灯片。

例如：如果我删除Remove item 3，第三张幻灯片将与相关元素正确删除。添加新幻灯片时应应用相同（数字重新排序）

虽然应该在下面删除和添加新幻灯片

  1. 按钮文本应重新排序为Remove item 1、Remove item 2、Remove item 3、Remove item 4等...而不是1、2、4、5
  2. 轮播项目图像文本（幻灯片 1、幻灯片 2、幻灯片 3）重新排序
  3. 轮播指示器数据滑动到数字重新排序

在此处输入图像描述

$(window).load(function() {
  $('#carousel-example-generic').carousel('pause'); 
});

var count=1;
$("#addSlide").click(function(){
  var carouselIndicators="<li id='ciIndicator"+count+"' data-target='#carousel-example-generic' data-slide-to='"+count+"'></li>";
  var carouselItem="<div id='ciItem"+count+"' class='item'><img src='http://placehold.it/400x200&text=Slide "+count+"' alt='' /></div>";
  var removeItem="<button id='ciBtnRemove"+count+"' onclick=foo('"+count+"')>Remove slide "+count+"</button>";
  $("ol.carousel-indicators").append(carouselIndicators);
  $(".carousel-inner").append(carouselItem);
  $("#removeItemContainer").append(removeItem);
  count++;
});

function foo(which){
  $("#ciIndicator"+which).remove();
  $("#ciItem"+which).remove();
  $("#ciBtnRemove"+which).remove();
}
.rpCarousel{width:400px;margin:auto;}
.item{position:relative;}
a.remove{position:absolute;top:0;left:100px;z-index:999;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button id="addSlide">Add</button>

<!-- Carousel wrapper -->
<div class="rpCarousel">

  <!-- Carousel holder -->
  <div id='carousel-example-generic' class='carousel slide' data-ride='carousel'>
    <!-- Indicators -->
    <ol class='carousel-indicators'>
      <li class="active" id="ciIndicator0" data-target='#carousel-example-generic' data-slide-to='0'></li>
    </ol>
    <!-- /Indicators -->

    <!-- Wrapper for slides -->
    <div class='carousel-inner'>
      <div id="ciItem0" class='item active'><img src='http://placehold.it/400x200&text=Slide 0' alt='' /></div>
    </div>
    <!-- /Wrapper for slides -->

    <!-- Controls -->
    <a class='left carousel-control' href='#carousel-example-generic' data-slide='prev'><span class='glyphicon glyphicon-chevron-left'></span></a>
    <a class='right carousel-control' href='#carousel-example-generic' data-slide='next'><span class='glyphicon glyphicon-chevron-right'></span></a>
    <!-- /Controls -->

  </div>
  <!-- /Carousel holder -->
  
  <div id="removeItemContainer"></div>

</div>
<!-- /Carousel wrapper -->

标签： jquerytwitter-bootstrap

解决方案

按照步骤。

  1. 将类添加remove_btn到按钮
  2. 向 resetCounter() 添加函数
  3. 删除幻灯片后调用函数 resetCounter()

$(window).load(function() {
      $('#carousel-example-generic').carousel('pause'); 
    });

    var count=1;
    $("#addSlide").click(function(){
      var carouselIndicators="<li id='ciIndicator"+count+"' data-target='#carousel-example-generic' data-slide-to='"+count+"'></li>";
      var carouselItem="<div id='ciItem"+count+"' class='item'><img src='http://placehold.it/400x200&text=Slide "+count+"' alt='' /></div>";
      var removeItem="<button class='remove_btn' id='ciBtnRemove"+count+"' onclick=foo('"+count+"')>Remove slide "+count+"</button>";
      $("ol.carousel-indicators").append(carouselIndicators);
      $(".carousel-inner").append(carouselItem);
      $("#removeItemContainer").append(removeItem);
      count++;
      resetCounter();
    });

   function foo(which){
      $("#ciIndicator"+which).remove();
      $("#ciItem"+which).remove();
      $("#ciBtnRemove"+which).remove();
      resetCounter();
    }

    function resetCounter(){
        $(".remove_btn").each(function(i){
            $(this).text("Remove slide "+ (i+1));
        })
    }
.rpCarousel{width:400px;margin:auto;}
    .item{position:re`enter code here`lative;}
    a.remove{position:absolute;top:0;left:100px;z-index:999;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <button id="addSlide">Add</button>

    <!-- Carousel wrapper -->
    <div class="rpCarousel">

      <!-- Carousel holder -->
      <div id='carousel-example-generic' class='carousel slide' data-ride='carousel'>
        <!-- Indicators -->
        <ol class='carousel-indicators'>
          <li class="active" id="ciIndicator0" data-target='#carousel-example-generic' data-slide-to='0'></li>
        </ol>
        <!-- /Indicators -->

        <!-- Wrapper for slides -->
        <div class='carousel-inner'>
          <div id="ciItem0" class='item active'><img src='http://placehold.it/400x200&text=Slide 0' alt='' /></div>
        </div>
        <!-- /Wrapper for slides -->

        <!-- Controls -->
        <a class='left carousel-control' href='#carousel-example-generic' data-slide='prev'><span class='glyphicon glyphicon-chevron-left'></span></a>
        <a class='right carousel-control' href='#carousel-example-generic' data-slide='next'><span class='glyphicon glyphicon-chevron-right'></span></a>
        <!-- /Controls -->

      </div>
      <!-- /Carousel holder -->
      
      <div id="removeItemContainer"></div>

    </div>
    <!-- /Carousel wrapper -->

推荐阅读