如果元素hasClass，將其他類添加到其標題值

我使用光滑的旋轉木馬，並且一旦div活動我想打開相應的描述。我有如果元素hasClass，將其他類添加到其標題值

問題是與此代碼：

if ($('div').hasClass('active')) { 
    var title = $(this).attr('title'); 
    $('ul li').removeClass('open'); 
    $(title).addClass('open'); 
}

我想要實現：一旦一個div獲取類「活動」，我想利用它的標題值，並用它作爲我想要顯示的列表元素的id鏈接（將類添加到）。

Here is a FIDDLE.

來源

2017-03-16 AthScc

使用事件'afterChange'光滑滑塊來檢查如果當前元素有'active'類，目前你的代碼只是在頁面加載時運行，而不是在類更改時運行 – empiric

我是初學者，不太清楚如何使用它。另外，當我在代碼本身初始化一個類時，list元素不會改變。 – AthScc

使用事件處理，而不是類監控。

流暢的傳送帶API有這個事件，我相信你想使用afterChange事件作用於活動元素後，它已經可見。

退房文檔和例子，特別是標題爲油滑頁上的「事件」：http://kenwheeler.github.io/slick/

而且我覺得你不希望使用title屬性爲這個，因爲這是工具提示。我建議使用data-*屬性。元素ID通常應以字母開頭，而不是數字（在HTML4中是必需的，並且在將ID映射到JavaScript變量時使生活更輕鬆;但如果您使用的是HTML5，則認爲此要求不再有效）。

HTML

<div id="carousel"> 
<div data-content-id="content1"> 
    Selector 1 </div> 
<div data-content-id="content2"> 
    Selector 2 </div> 
<div data-content-id="content3"> 
    Selector 3 </div> 
</div> 
<ul class="content"> 
    <li id="content1">Content 1</li> 
    <li id="content2">Content 2</li> 
    <li id="content3">Content 3</li> 
</ul>

的JavaScript

$('#carousel').on('afterChange', function(event, slick, currentSlide) { 
    // get the associated content id 
    var contentId = $(slick.$slides.get(currentSlide)).data("content-id"); 
    if(contentId && contentId.length) 
    { 
     var $content = $("#" + contentId); 

     $(".content>li").removeClass("open"); // hide other content 

     $content.addClass("open"); // show target content, or whatever... 
    } 
});

來源

2017-03-16 14:59:52 nothingisnecessary

這似乎完全停止我的旋轉木馬，我想不通爲什麼 [鏈接]（https://jsfiddle.net/bvrumh83/3/）FIDDLE – AthScc

感謝您試用它。我忘了在處理程序中包含'event'參數。固定代碼和你的小提琴：https://jsfiddle.net/1nmuq1f4/（你的小提琴沒有定義'open作爲一個類，所以我把它從'li open'改爲'li.open'） – nothingisnecessary

我已經找到了解決辦法：

$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){ 
     var contentId= $(slick.$slides.get(currentSlide)).data('content'); 
     if(contentId) 
     { 
      $(".content li").removeClass('open'); 
      $('#' + contentId).addClass('open'); 
     } 
});

工作fiddle

來源

2017-03-16 22:06:23 AthScc

小心當使用'.content li'是因爲它會拾取內容中的所有'LI'元素，所以如果你的內容包含列表項（或者其他人使用你的代碼），那麼它也會混淆它們的風格。這就是我爲什麼使用'.content> li'的原因，但是最好在'LI'元素上放一個'content_item'類，這樣你就可以直接給它們設計樣式 – nothingisnecessary

這僅僅用於演示，在真實項目中我'使用類:) – AthScc

如果元素hasClass，將其他類添加到其標題值

回答

相關問題