Question

我希望隐藏/显示基于第一个和最后一个孩子的班级变化的div。

<div class="owl-stage">
    <div class="owl-item active">
        <img src="imagge.png" alt="alt text">
    </div>
    <div class="owl-item">
        <img src="imagge2.png" alt="alt text">
    </div>
    <div class="owl-item">
        <img src="imagge3.png" alt="alt text">
    </div>
</div>

<div class="buttons">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

因此，如果第一个孩子的课程处于活动状态，则".buttons .left"应隐藏，否则"right"应隐藏。

active课程在网站上反复移动，我希望每当班级active发生变化时我都可以运行此功能。

这是我尝试过的： -

jQuery('div.owl-item').bind("DOMSubtreeModified",function(){
  if(jQuery('div.owl-item:first').hasClass("active")) {//Hide Left or Right}
});

Answer 1

Owl Carousel内置events API。最好的解决方案是利用它并挂钩onChanged回调。并使用返回的event数据来计算first和last选项。根据文档（强调添加）：

//由核心提供       var element = event.target; // DOM元素，在此示例中.owl-carousel
      var name = event.type; //事件的名称，在此示例中拖动了
      var namespace = event.namespace; //事件的命名空间，在本例中为owl.carousel
       var items = event.item.count; //项目数量
       var item = event.item.index; //当前项目的位置
      //由导航插件提供
      var pages = event.page.count; //页数
      var page = event.page.index; //当前页面的位置
      var size = event.page.size; //每页的项目数

因此，在设置旋转木马时，您需要使用类似

的内容

$('.owl-carousel').owlCarousel({
    onChanged: onChangedCallback
});
function onChangedCallback(event) {
    if(event.item.index === 0){
        // is on the "first" item
        $('.buttons .left').hide();
        $('.buttons .right').show();
    }else if(event.item.index === event.item.count - 1){
        // is on the "last" item
        $('.buttons .left').show();
        $('.buttons .right').hide();
    }else{
        $('.buttons .left').show();
        $('.buttons .right').show();
    }
}

Answer 2

我在代码中添加了一些注释。

	$(function() {
	  $('.buttons .left').hide(); //initial run
	  $('div.owl-stage').on('triggerClassChange', function() {
	    if ($(this).find('div.owl-item').first().hasClass('active')) {
	      $('.buttons .left').hide();
	    } else {
	      $('.buttons .left').show();
	    }
	    if ($(this).find('div.owl-item').last().hasClass('active')) {
	      $('.buttons .right').hide();
	    } else {
	      $('.buttons .right').show();
	    }

	  });

	  $('.buttons .right').click(function() {
	    var ref = $('div.owl-stage').find('div.owl-item.active').get(0); // current item that has active class
	    var refNext = $(ref).next(); //reference for the next item adjacent to the current .active item
	    if (refNext.get(0) != undefined) { //make sure there is a item available
	      $(refNext).addClass('active'); //add class to the next item
	      $(ref).removeClass('active').trigger('triggerClassChange'); //remove class on current and trigger our custom event
	    }

	  });

	  $('.buttons .left').click(function() {
	    var ref = $('div.owl-stage').find('div.owl-item.active').get(0); // current item that has active class
	    var refPrev = $(ref).prev(); //reference for the next item adjacent to the current .active item
	    if (refPrev.get(0) != undefined) { //make sure there is a item available
	      $(refPrev).addClass('active'); //add class to the next item
	      $(ref).removeClass('active').trigger('triggerClassChange'); // remove class on current and trigger our custom event
	    }
	  });

	})

.active {
  background-color: red;
  width: 100px;
  height: 50px;
}
.right {
  display: inline-block;
}
.left {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-stage">
  <div id='1' class="owl-item active">
    <img src="imagge.png" alt="alt text">
  </div>
  <div id='10' class="owl-item">
    <img src="imagge2.png" alt="alt text">
  </div>
  <div id='2' class="owl-item">
    <img src="imagge2.png" alt="alt text">
  </div>
  <div id='3' class="owl-item">
    <img src="imagge3.png" alt="alt text">
  </div>
</div>

<div class="buttons">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

Answer 3

浏览器：Chrome 55

Interface MutationObserver

var observer = new MutationObserver(function (mutationRecord) {
  var target = mutationRecord[0].target;
  var id = target.id;
  var className = target.className;

  if (id === "owl1" && className.indexOf("active") > -1) {
    //Hide Left or Right
  } else if (id === "owl3" && className.indexOf("active") > -1) {
    //Hide Left or Right
  } else {
    //Hide Left or Right
  }
});

observer.observe(document.querySelector("div.owl-item"), {
  attributes: true,
  attributeFilter: ["class"]
});

document.querySelector("#owl1").className += " active";

<div class="owl-stage">
  <div class="owl-item" id="owl1">
    <img src="imagge.png" alt="alt text">
  </div>
  <div class="owl-item" id="owl2">
    <img src="imagge2.png" alt="alt text">
  </div>
  <div class="owl-item" id="owl3">
    <img src="imagge3.png" alt="alt text">
  </div>
</div>

Answer 4

为什么不尝试自定义事件。可能是这个网址会有所帮助。 http://www.htmlgoodies.com/beyond/javascript/creating-custom-events-with-jquery.html

检测div的第一个和最后一个子节点是否通过JS进行类更改

4 个答案: