Question

我正在尝试根据幻灯片类更改的时间更改一个元素上的类。

例如：当在slide-1上时，它具有当前类。此时图类=＆＃34;键左＆＃34;还应该有.key-out类。

当你切换到slide-2时，它会获得当前类，而slide-1会失去它，而key-left应该将class切换为key-in。

我无法通过滑动开关上的键交换键出类。不太确定我做错了什么。谢谢任何帮助表示赞赏。

我正在使用名为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可能更简单，更不易碎。如果幻灯片的数量发生变化，则必须更新代码才能匹配。相反，获取.slide的jQuery元素数组的长度，并检查该值的索引（比如$('.slide').eq(5)，并检查第一个的索引零。

滑动类更改时切换类

1 个答案: