Jquery Switchclass Keeps Switching Back

What I am trying to do is to make a button on click, go to the top left slot in the crafting table on this page. Then if the element is clicked again it will go back. The specific

Solution 1:

Just checked your code on the page you linked to. You have bound two click handlers to #sword. You have only shown the first one. Your code is as follows

$("#sword").click(function () { // handler 1if ( $("#sword").hasClass("s1") ) {
        $('#sword.s1').switchClass("s1", "sd1", 1000, "linear");
    } elseif ($("#sword").hasClass("sd1")) {
        $('#sword').switchClass( "sd1", "s1", 1000, "linear" );
        $('#bukkit').switchClass( "s1", "sd2", 1000, "linear" );
        $('#grass').switchClass( "s1", "sd3", 1000, "linear" );
    }
});

// a few lines later    

$("#sword").click(function() { // handler 2
    $('#sword').switchClass( "s1", "sd1", 1000, "linear" );
    $('#bukkit').switchClass( "s1", "sd2", 1000, "linear" );
    $('#grass').switchClass( "s1", "sd3", 1000, "linear" );
}); 

Clicking on the sword executes handler 1 first and then handler 2. As is clear from the code, handler 1 moves it up and handler 2 brings it down.

If you explain why you wrote the second handler, I might be able to help more.

Solution 2:

Try to re-order your switchClass classes of id sword is changed to sd2 after it changes from sd1 to s1

$("#sword").click(function () {

    if ( $("#sword").hasClass("s1") ) {
        $('#sword.s1').switchClass( "s1", "sd1", 1000, "linear" );
    } elseif (  $("#sword").hasClass("sd1") ) {
        $('#bukkit').switchClass( "s1", "sd2", 1000, "linear" );
        $('#grass').switchClass( "s1", "sd3", 1000, "linear" );
        $('#sword').switchClass( "sd1", "s1", 1000, "linear" );
    }

});