Question

我正在尝试在slide-content的标题div中动态添加一个类slide-buttons和Bootstrap Carousel。我希望我的代码只有在类animate的父div添加了类item时才添加类active。（仅当项目滑入时才会添加班级active。）。这是Carousel的基本HTML。

  <div class="carousel-inner" role="listbox">
  <!-- Item 1 -->
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        <div class="slide-content>
        ...
        </div>
        <div class="slider-buttons">
        ...
        </div>
      </div>
    </div>
    <!-- /Item 1 -->
    <!-- Item 2 -->
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        <div class="slide-content>
        ...
        </div>
        <div class="slider-buttons">
        ...
        </div>
      </div>
    </div>
    <!-- /Item 2 -->
    ...
  </div>

而且，这就是我的尝试。

$item = $('.carousel-inner > .item');
$( $('.carousel-inner > .item') ).each(function() {
if ( this.hasClass('active') ) {
    $('.carousel-caption > .slide-content, .carousel-caption > .slider-buttons').addClass('animated');
} else {
    $('.carousel-caption > .slide-content, .carousel-caption > .slider-buttons').removeClass('animated');
}
});

现在，当我删除jQuery的each函数时，当任何项获得类animated时，它会将类active添加到所有元素。此外，它根本不会删除该类（因为类active存在，尽管父div。）。而且，当我添加each函数时，它根本不起作用。

请帮忙。

Answer 1

您可以使用适当的选择器遍历元素

var inner = $('.carousel-inner');

//traverse not active item then find the buttons and remove the animated class
inner.find('> .item:not(.active) .carousel-caption').children('.slide-content .slider-buttons').removeClass('animated');

//traverse active item then find the buttons and add the animated class
inner.find('> .item.active .carousel-caption').children('.slide-content .slider-buttons').addClass('animated');

Answer 2

我的猜测：

  $('.carousel-inner :not(.active)').find('.slide-content,.slider-buttons').removeClass('animated');
  $('.carousel-inner .active').find('.slide-content,.slider-buttons').addClass('animated');

顺便说一下，你忘记了结束双引号：

<div class="slide-content>

应该改为：

<div class="slide-content">

添加类到元素如果它已经有一个特定的类

2 个答案: