mnsth mnsth - 2 months ago 10
Javascript Question

If element changed class from one particular to another in jQuery

Normally my slideshow goes automatically to the next picture, but I want to detect if it goes backwards by an user-initiated action (keyboard arrows or controls). My solution to this would be to do this (my imaginary code):

if(jQuery("#slideshow article").hasChangedClassFrom("previous").hasChangedClassTo("current")) {
backwards = true;
}
if(backwards) { // code for backwards
jQuery("#slideshow article.previous").css("z-index", "1");
jQuery("#slideshow article.next").css("z-index", "2");
}
else { // code for forwards (normal state)
jQuery("#slideshow article.previous").css("z-index", "2");
jQuery("#slideshow article.next").css("z-index", "1");
}


The classes are already implemented, so that the current slide always has the class "current" and so on. I know this isn't valid code at all, but by reading this, I think it would be quite clear what I want to achieve. I'm not very good at JavaScript/jQuery, but I've tried searching for solutions like this without luck.

Live site // Live JS code

Answer

Instead of guessing that the previous class, use the current and the previous index.

http://jsfiddle.net/whyba4L9/5/

UPDATE 2:

var stopp, antall = jQuery("#slideshow article").length;
var index = 0

function slideTo(idx) {
    jQuery("#slideshow article, #slideshow nav a").removeAttr("class").filter(':nth-of-type(' + (idx+1) + ')').addClass("current");
    if(jQuery("#slideshow article:nth-of-type(2)").hasClass("current")) {
        jQuery("#slideshow article:first-of-type").addClass("forrige");
        jQuery("#slideshow article:last-of-type").addClass("neste");
    }
    else if(jQuery("#slideshow article:first-of-type").hasClass("current")) {
        jQuery("#slideshow article:last-of-type").addClass("forrige");
        jQuery("#slideshow article:nth-of-type(2)").addClass("neste");
    }
    else if(jQuery("#slideshow article:last-of-type").hasClass("current")) {
        jQuery("#slideshow article:nth-of-type(2)").addClass("forrige");
        jQuery("#slideshow article:first-of-type").addClass("neste");
    }

    if(index ==antall-1 && idx ==0 )
    {
        //lasto to first
    }
    else if(index>idx || (index == 0 && idx == antall-1))
    {
        alert('BACKWARDS')
    }
    index = idx;

};
function startCycle() {
    stopp = setInterval(function() {
        jQuery("#slideshow article").stop(true, true);
        var idx = index + 1 > antall - 1 ? 0 : index + 1;
        slideTo(idx,false);
    }, 5500);
}; 
if (antall > 1) {
    jQuery("#slideshow").append("<nav>").css("height", jQuery("#slideshow img").height());
    jQuery("#slideshow article").each(function() {
        jQuery("#slideshow nav").append("<a>&bull;</a>");
    }).filter(":first-of-type").addClass("current first");
    jQuery("#slideshow article:nth-of-type(2)").addClass("neste");
    jQuery("#slideshow article:last-of-type").addClass("forrige");
    startCycle();
    jQuery("#slideshow nav a").click(function() {
        clearInterval(stopp);
        startCycle();
        var idx = jQuery("#slideshow nav a").index(this);
        if (index === idx) return;
        slideTo(idx);
    }).filter(":first-of-type").addClass("current");
    jQuery(document).keyup(function(e) {
        if (e.keyCode == 37) {
            var idx = index - 1 < 0 ? antall - 1 : index - 1;
            slideTo(idx);
            clearInterval(stopp);
            startCycle();
        } 
        else if (e.keyCode == 39) {
            var idx = index + 1 > antall - 1 ? 0 : index + 1;
            slideTo(idx);
            clearInterval(stopp);
            startCycle();
        }
    });
}