jQuery keydown只工作一次

Question

EDIT: I solved it by changing = to ==, but that didnt fully solve it but then I added a change to $currentSlide and now it works! Yay!

            $(document).keydown(function(e) {
            if(e.keyCode == 39)
                {
                    if($currentSlide == $slide1){
                        slideShow(slide2);
                        $currentSlide = $slide2;
                    }
                    else if($currentSlide == $slide2){
                        slideShow(slide3);
                        $currentSlide = $slide3;
                    }
                    else if($currentSlide == $slide3){
                        slideShow(slide1);
                        $currentSlide = $slide1;
                    }
                }
        })

I have searched for an answer but haven't found anything that suits my question. I am a noob on javascript so bear with me.

I have a function that works as a slideshow. (I use $ in front of my jquery variables, I have a lot of javascript variables too so I just use it to separate them.)

var $currentSlide = "#slide1";
var $slide1 = "#slide1";
var $slide2 = "#slide2";
var $slide3 = "#slide3";

function slideShow($slide) {
    if ($slide != $currentSlide){
        $($currentSlide).fadeOut(500);
        $($slide).delay(500).fadeIn(500);
        $currentSlide = $slide;
    }
};

To call this function, I use a simple link with parameter depending on which slide is active.

onclick="slideShow(slide2)"

And then I want to change slide with keypress (to right). This is my code for the keypress:

$(document).keydown(function(e) {
    if(e.keyCode == 39) {
        if ($currentSlide = $slide1){
            slideShow(slide2);
        } else if($currentSlide = $slide2) {
            slideShow(slide3);
        } else if($currentSlide = $slide3) {
            slideShow(slide1);
        }
     }
})

It works perfectly when using the links but when I press key it behaves very weird. First click works like a charm, but then it doesnt work any more. If I click to get the third slide, another click will put next slide on top of slide3 but slide3 never goes away.

I realise there is some huge mistake by me here but I'm too much of a beginner to fix it. Any ideas?

Answer 1

your if-else conditions will always be true, because you used '=' instead of '=='. since your first if condition will be true it always shows slide2 and it looks to you that it only worked once

$(document).keydown(function(e) {
    if(e.keyCode == 39) {
        if ($currentSlide == $slide1){
            slideShow(slide2);
        } else if($currentSlide == $slide2) {
            slideShow(slide3);
        } else if($currentSlide == $slide3) {
            slideShow(slide1);
        }
     }
})

The second problem maybe caused by the clock on the slideshow, if you are using one. When you click the next/previous button you need to reset the clock of your slideshow.

Answer 2

There are two issues

• You do an assignment in your if conditions, so they always are true. Instead use the comparator === ;
• In the onclick attribute you specify an undefined variable, since the $ is missing from it

Beside correcting this, I would suggest to use a class for your slide elements, not individual IDs. So use class="slide" instead of id="slide1" in your HTML, and apply it to all slides -- they can share the same class.

Then store the sequence number of the current slide, counting from 0.

I would also remove all the onclick attributes on the slide elements and deal with click handlers from code, which can be done quite concisely with $('.slide').click( ... ) :

var currentSlideNo = 0; // zero-indexed

function slideShow(slideNo) {
    if(slideNo != currentSlideNo){
        $('.slide').get(currentSlideNo).fadeOut(500);
        currentSlideNo = slideNo;
        $('.slide').get(currentSlideNo).delay(500).fadeIn(500);
    }
};

$('.slide').click(function () {
    slideShow((currentSlideNo + 1) % $('.slide').length);
});

$(document).keydown(function(e) {
    if (e.keyCode == 39) {
        slideShow((currentSlideNo + 1) % $('.slide').length);
    }
});