在幻燈片類更改時切換類

Question

我試圖根據幻燈片類更改的時間更改一個元素上的類。

例如：在幻燈片1上它具有當前類別。此時figure class =「key-left」也應該具有.key-out類。

當您切換到幻燈片2時，它將獲得當前類別，並且幻燈片1會丟失它，然後應該將類別切換爲鍵入。

我無法得到鍵輸出類與滑動開關上的鍵交換。不太確定我做錯了什麼。感謝任何幫助表示讚賞。

我使用了一個名爲dragdealer滑塊：

https://github.com/skidding/dragdealer/blob/master/src/dragdealer.js

<div class="dir-help"> 
    <figure class="key-left"> 
     <figcaption>Keyboard, Swipe or Click and and drag</figcaption> 
     <img src="images/key-left.svg" alt="Left Arrow Kew, indicating you can use your keyboard"> 
    </figure> 
    <figure class="key-right"> 
     <figcaption>Keyboard, Swipe or Click and and drag</figcaption> 
     <img src="images/key-right.svg" alt="Right Arrow Kew, indicating you can use your keyboard"> 
    </figure> 
</div> 

<section class="img-dragger img-dragger-large dragdealer active"> 
    <div class="handle"> 
     <div id="slide-1" class="slide current" data-content="content-1"></div> 
     <div id="slide-2" class="slide" data-content="content-2"></div> 
     <div id="slide-3" class="slide" data-content="content-3"></div>  
    </div> 
    <!--End .handle--> 
</section> 

CSS

.key-out{opacity:0;} 
.key-in{opacity:1;} 

JS

嘗試＃1（失敗）

if($('#slide-1').hasClass('current')){ 
    $('.key-left').addClass('key-out'); 
}else{ 
    $('.key-left').removeClass('key-out'); 
    $('.key-left').addClass('key-in'); 
} 

嘗試＃2（失敗）

$('.key-left').toggleClass(function(){ 
    if($('#slide-1').hasClass('current')){ 
     return 'key-out'; 
    }else{ 
     $('.key-left').removeClass('key-out'); 
     return 'key-in'; 
    } 
}); 

從dragedealer.js我試圖用一些進展，類似下面使用回調方法，但它是目前還沒有正常工作，它只在第二張幻燈片上添加該類。

new Dragdealer('slideshow', { 
    x: 0, 
steps: 6, 
    callback: function(x, y) { 
    if (x) { 
     $('.key-left').addClass('key-out'); 
     //this.disable(); 
    // $('#slide-to-unlock-old').fadeOut(); 
    } 
    } 
}); 

Answer 1

我不是你想實現什麼完全清楚，但你只需把你的功能手柄釋放回調中：

new Dragdealer('slideshow', { 
    x: 0, 
    steps: 6, 
    callback: function(x, y) { 
     if ($('#slide-1').hasClass('current')) { 
      $('.key-left').addClass('key-out').removeClass('key-in'); 
     } else { 
      $('.key-left').removeClass('key-out').addClass('key-in'); 
     } 
    } 
}); 

注意，它可能是更簡單，不太易於依靠索引來檢查幻燈片元素上的類，而不是依靠ID。如果幻燈片的數量發生變化，您必須更新您的代碼才能匹配。相反，得到​​的jQuery元素數組的長度，然後檢查該值的索引（比如說$('.slide').eq(5)，並檢查第一個索引爲零）