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>

并且在所有这些代码之后：应该分离没有“active”div的data-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）我无法用这两个具有活动类的div操作（给它们onclick（）属性，新类或id等等）。抱歉我的英语。

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>

Answer 2

当我将代码放入文本编辑器时，我无法获得可点击的数字。你可以制作小提琴或代码笔来展示什么有用吗？

jQuery分离，前置和条件

2 个答案: