時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 {}的樣式。如果元素髮生更改，則必須再次將其刪除。