bilcker bilcker - 19 days ago 9
jQuery Question

Toggle Classes when Slide Classes Change

I am trying to change classes on one element depending on when slide classes change.

For Example: when on slide-1 it has the class of current. At this point figure class="key-left" should also have the class of .key-out.

When you switch to slide-2 it gains the class of current and slide-1 loses it and key-left should then switch class to key-in.

I can not get the key-out class to swap with key on the slide switch. Not too sure what I am doing wrong. Thanks any help is appreciated.

I am using a slider called 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

Try #1 (fail)

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


Try #2 (Fail)

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


Using the callback methods from dragedealer.js I am attempting something like below with some progress but it is not working properlly yet, It only adds the class on the second slide so far.

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

I'm not entirely clear on what you're trying to accomplish, but you'd simply put your function inside the handle release callback:

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');
        }
    }
});

Note that it may be simpler and less fragile to check classes on your slide elements by index rather than relying on IDs. If the number of slides changes, you have to update your code to match. Instead, get the length of the jQuery element array for .slide, and check the index at that value (say $('.slide').eq(5), and check index zero for the first one.