时addClass（）发生

Question

下面是这个bootstnipp样品转盘上的“最低限度”修订verison添加CSS：
https://bootsnipp.com/snippets/VolV

我添加SASS给彩色边框缺口的“活动”列表项。我正在尝试编辑javascript文件，以在“活动”类更改/添加到新列表项时更改边框切口。我试图首先创建一个变量来存储'活动'列表项的边框凹槽的currentColor，然后将父UI的边框颜色更改为与'活动'列表项的边框凹槽颜色相对应。

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <ul class="nav nav-pills nav-justified carousel-border"> 
     <li data-target="#myCarousel" data-slide-to="0" class="client-1 active"> 
      <a href="#"> 
       <img src="" class="" alt="" title=""> 
      </a> 
     </li> 
     <li data-target="#myCarousel" data-slide-to="1" class="client-2"> 
      <a href="#"> 
       <img src="" class="" alt="" title=""> 
      </a> 
     </li> 
     <li data-target="#myCarousel" data-slide-to="2" class="client-3"> 
      <a href="#"> 
       <img src="" class="" alt="" title=""> 
      </a> 
     </li> 
     <li data-target="#myCarousel" data-slide-to="3" class="client-4"> 
      <a href="#"> 
       <img src="" class="" alt="" title=""> 
      </a> 
     </li> 
     <li data-target="#myCarousel" data-slide-to="4" class="client-5"> 
      <a href="#"> 
       <img src="" class="" alt="" title=""> 
      </a> 
     </li> 
    </ul> 
</div> 

#myCarousel { 
    .nav-pills { 
     >li { 
      &.client-1 { 
       &.active { 
        &:before { 
         border-color: transparent transparent #FACC00 transparent; 
        } 
       } 
      } 
      &.client-2 { 
       &.active { 
        &:before { 
         border-color: transparent transparent #685742 transparent; 
        } 
       } 
      } 
      &.client-3 { 
       &.active { 
        &:before { 
         border-color: transparent transparent #E2EDC3 transparent; 
        } 
       } 
      } 
      &.client-4 { 
       &.active { 
        &:before { 
         border-color: transparent transparent #138B95 transparent; 
        } 
       } 
      } 
      &.client-5 { 
       &.active { 
        &:before { 
         border-color: transparent transparent #FAA41A transparent; 
        } 
       } 
      } 
     } 
    } 
} 

$(document).ready(function() { 
    $('#myCarousel').carousel({ 
     interval: 4000 
    }); 

    var clickEvent = false; 
    var currentColor = $('#myCarousel .nav li.active:before').css('border-color'); 
    $('#myCarousel').on('click', '.nav a', function() { 
     clickEvent = true; 
     $('#myCarousel .nav li').removeClass('active'); 
     $(this).parent().addClass('active').parent('.nav').css('border-color', currentColor); 
    }).on('slid.bs.carousel', function (e) { 
     if (!clickEvent) { 
      var count = $('#myCarousel .nav').children().length - 1; 
      var current = $('#myCarousel .nav li.active'); 
      current.removeClass('active').next().addClass('active'); 
      var id = parseInt(current.data('slide-to')); 
      if (count == id) { 
       $('#myCarousel .nav li').first().addClass('active'); 
      } 
     } 
     clickEvent = false; 
    }); 
}); 

Answer 1

关于到this post你不能访问：前：jQuery中之后，因为它们不是DOM的一部分。 此外，为了使用样式：之前和之后：你应该添加内容：'';到它。否则，样式将不会显示在所有浏览器中。

您可以将数据颜色添加到元素，然后使用此信息。但我认为你不会对此感到高兴，因为你不会再有风格和html的分离。

另一种选择是向指定活动元素的父元素添加一个类。例如addClass（'client-1'），然后你可以指定类似ul.client-1 {}的样式。如果元素发生更改，则必须再次将其删除。