Переключить классы при изменении классов слайдов

Question

Я пытаюсь изменить классы на один элемент в зависимости от того, когда меняются классы слайдов.

Например: когда на слайде 1 имеется класс тока. На этом этапе класс 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'); 
     } 
    } 
}); 

Обратите внимание, что может быть проще и менее хрупкий, чтобы проверять классы на ваших элементах слайда по индексу, а не полагаться на идентификаторы. Если количество слайдов изменяется, вам необходимо обновить код для соответствия. Вместо этого получите длину массива элементов jQuery для .slide и проверьте индекс на это значение (скажем $('.slide').eq(5)) и проверьте нулевой индекс для первого.