jQuery detach, prepend and condition

Question

>我有两个可点击的div元素。当我单击一个包含"1"时，它会给它class="active"，当我点击一个包含"2"时，它会给它class="active"并从第一个中删除class="active"。基本上它就像开关。

<div class="active">1</div>
<div class="">2</div>

那么这个块：

<div class="carousel-inner">
  <div class="carousel-item " data-id="1" data="carousel-item"></div>
  <div class="carousel-item " data-id="2" data="carousel-item"></div>
</div>

在所有这些代码之后：它应该分离没有"活动"div 数据 ID 的div。切换时，它应该重新连接分离的div 并分离第二个。

<script>
$(document).ready(function(){
    var a = $("div:contains('1')"), 
        b; 
      if (a.hasClass('active')){ 
        b = $("[data-id!='1'][data='carousel-item']").detach(); 
      } 
      else{ 
         $(".carousel-inner").prepend(b);
      } 
}); 
</script>

但是，它不起作用。 当我切换(类活动从一个div 移动到另一个div(时，没有任何反应。 只有第一个div 被分离，但在切换时它不会重新连接。任何想法为什么？感谢您的任何帮助！

PS： 1.由于某些原因(FU mobirise(我无法使用具有活动类(给他们onclick((属性，新类或id等(的两个div进行操作。 2.对不起我的英语。

Answer 1

这是一个可能的解决方案。 我改变了你进行交换的方式，所以它不会做分离。 但是它应该让你知道如何做到这一点，如果你确实想做分离的话。

//emulate the external logic that swaps the active class
$(function(){
  var $elements = $('.top');
  
  $elements.on('click', function(){
    $elements.not(this).removeClass('active');
    $(this).addClass('active');
  });
});
$(function(){
  var $top = $('.top');
  var $carousel = $('.carousel-inner');
  var $carouselItems = $carousel.find('.carousel-item');
  
  $top.on('click', function(){
    var $this = $(this);
    
    $carousel.prepend($carouselItems.filter(function(){
      return $this.data('id') === $(this).data('id');
    }));
  });
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top active" data-id="1">1</div>
<div class="top" data-id="2">2</div>
<div class="carousel-inner">
  <div class="carousel-item " data-id="1" data="carousel-item">Number 1</div>
  <div class="carousel-item " data-id="2" data="carousel-item">Number 2</div>
</div>