addClass and removeClass previous class on keydown Jquery

Question

addClass and removeClass previous class on keydown Jquery

1.2k views Asked by kieranstartup At 19 September 2024 at 14:23

I'm trying to work out how to change the class on an image on a keydown function. Basically when I press the right arrow key I want the carousel to move to the right, for the image to change class to 'selected' and to remove the class from the previous image. I'd like the same to happen with the left arrow key. I currently have the moving right and left on keydown working fine, but I'm struggling with adding and removing the class. This is my current 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>

And this is the code to animate the carousel right and left —

    $("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();
        }
    });

Any help would be great. Cheers!

Original Q&A

There are 1 answers

**PeterKA** · Accepted Answer · 2014-11-16 22:17:31

Assuming that rotate_int is the index of the current carousel then your code would be:

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

UPDATE

DEMO

Based on the demo here is the updated code:

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

TechQA.

addClass and removeClass previous class on keydown Jquery

There are 1 answers

Related Questions in JQUERY

Related Questions in CAROUSEL

Related Questions in ADDCLASS

Related Questions in KEYDOWN

Related Questions in REMOVECLASS

Popular Questions

Popular Tags

Trending Questions