Question

我要做的是点击一个按钮，转到this page上制作表格中的左上角插槽。然后，如果再次单击该元素，它将返回。我使用的具体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时单独退回一个单独的函数，但是当我点击它时什么都不会发生。

Answer 1

尝试重新订购switchClass个sword个ID sd2类已从sd1更改为s1后更改为$("#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" ); } });

{{1}}

Answer 2

刚刚检查了您链接到的网页上的代码。您已将两个点击处理程序绑定到#sword。你只展示了第一个。您的代码如下

$("#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将其向下移动。

如果您解释为什么编写第二个处理程序，我可以提供更多帮助。

jQuery Switchclass不断切换回来

2 个答案: