Javascript jqueryswitchclass保持向后切换

我正在尝试做的是在点击时做一个按钮，转到制作表左上角的插槽。然后，如果再次单击该元素，它将返回。我使用的特定jQuery是：

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

---

sd1

位于下方，

s1

位于上方的插槽。正如你现在看到的，它会向上反弹，然后立即向下反弹。我曾尝试在单击

.s1

时将反弹设置为一个单独的函数，但单击后不会发生任何事情。

尝试重新排序id的

开关类
剑
在从
sd1
更改为
s1
后更改为
sd2

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

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

});

刚刚在链接到的页面上检查了代码。您已将两个单击处理程序绑定到
#swook
。您只显示了第一个。你的代码如下

$("#sword").click(function () { // handler 1
    if ( $("#sword").hasClass("s1") ) {
        $('#sword.s1').switchClass("s1", "sd1", 1000, "linear");
    } else if ($("#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" );
}); 

单击剑首先执行处理程序1，然后执行处理程序2。从代码中可以清楚地看到，处理程序1将其向上移动，处理程序2将其向下移动

如果你解释一下为什么要编写第二个处理程序，我可能会提供更多帮助。
非常感谢，我真不敢相信我没有删除我以前的尝试。我觉得