Question

我试图找出如何在keydown函数上更改图像上的类。基本上，当我按下右箭头键时，我希望旋转木马向右移动，以便将图像更改为“选择”＃39;并从上一个图像中删除该类。我想用左箭头键发生同样的事情。我目前在keydown的左右移动工作正常，但我正在努力添加和删除课程。这是我目前的html -

<body>    
    <div id="wrapper">
    <div id="perspective">
        <div id="carousel">
            <figure>
                <img src="image1.png" class="selected">
                <div class="caption">
                    <div class="captionHeading">
                        <h2 style="captionHeading">Title</h2>
                    </div>
                    <p2>Some Text</p2>
                    <p3>Some Text</p3>
                </div>
            </figure>
            <figure>
                <img src="image2.png">
                <div class="caption">
                    <div class="captionHeading">
                        <h2 style="captionHeading">Title</h2>
                    </div>
                    <p2>Some Text</p2>
                    <p3>Some Text</p3>
                </div>
            </figure>
     </div>
</div>
</div>
</div>

这是左右旋转木马动画的代码 -

    $("body").keydown(function(e) {

        if (e.which == 39) { // right
            console.log(e.which);
            rotate_int -= 1;
            animate_slider();
        } else if (e.which == 37) { // left
            console.log(e.which)
            rotate_int += 1;
            animate_slider();
        }
    });

任何帮助都会很棒。干杯！

Answer 1

假设rotate_int是当前轮播的索引，那么您的代码将是：

var slides = $('#carousel').find('figure > img');
$("body").keydown(function(e) {

    if (e.which == 39) { // right
        console.log(e.which);
        slides.eq( rotate_int ).removeClass( 'selected' );
        rotate_int -= 1;
        slides.eq( rotate_int ).addClass( 'selected' );
        animate_slider();
    } else if (e.which == 37) { // left
        console.log(e.which)
        slides.eq( rotate_int ).removeClass( 'selected' );
        rotate_int += 1;
        slides.eq( rotate_int ).addClass( 'selected' );
        animate_slider();
    }
});

<强>更新

DEMO

根据演示，这里是更新的代码：

    var slides = $('#carousel').find('figure > img');
    $("body").keydown(function (e) {

        var index = slides.index( slides.filter('.selected') );
        if (e.which == 39) { // right
            console.log(e.which);
            index = (index + 1) % slides.length;
            slides.removeClass('selected');
            slides.eq(index).addClass('selected');
            rotate_int -= 1;                
            animate_slider();
        } else if (e.which == 37) { // left
            console.log(e.which);
            index = index === 0 ? slides.index - 1 : index - 1;
            slides.removeClass('selected');
            slides.eq(index).addClass('selected');
            rotate_int += 1;
            animate_slider();
        }
    });

在keydown Jquery上的addClass和removeClass以前的类

1 个答案: