0

我有一个关于在 jQuery 中切换 html 标签的类的问题

现在，我有类似的代码

<body>
    <button id="login" class="login">login</button>


    <script>
        jQuery(function($){

            $('.logout').click(function(){
                $(this).removeClass('logout');
                $(this).addClass('login');
                $(this).text('login');
                alert('logged out, ready to login');
            });

            $('.login').click(function(){
                $(this).removeClass('login');
                $(this).addClass('logout');
                $(this).text('logout');
                alert('logged in, ready to logout');
            });

        });
    </script>
</body>

我想知道为什么它总是运行 $('.login').click 不管它是什么类。

谢谢

4

6 回答 6

4

即使在班级发生变化后，该活动仍然受到约束。您可以将事件委托给 DOM 中它上面的元素，它只会为匹配过滤器的类运行，如下所示：

jQuery(function($){

    $(document).on('click', '.logout', function(){
        $(this).removeClass('logout');
        $(this).addClass('login');
        $(this).text('login');
        alert('logged out, ready to login');
    });

    $(document).on('click', '.login', function(){
        $(this).removeClass('login');
        $(this).addClass('logout');
        $(this).text('logout');
        alert('logged in, ready to logout');
    });

});

这是一个演示：http: //jsfiddle.net/B4d9a/

于 2013-07-18T17:50:29.130 回答
3

使用 jQuery 的on方法

    $(document).on('click', '.logout', function() {
            $(this).toggleClass('login logout').text('login');
            alert('logged out, ready to login');
    });

    $(document).on('click', '.login', function() {
            $(this).toggleClass('login logout').text('logout');
            alert('logged in, ready to logout');
    });

事件click监听器只注册一次，当您注册时，您的按钮具有 class login。如果您希望它logout稍后使用侦听器，则需要更新侦听器。当您的代码运行时，有一个.login按钮，但没有.logout按钮，因此.login处理程序被注册并且.logout处理程序被丢弃。

但是，通过使用$(document).on您在元素上注册两个事件，该document元素在加载时始终存在，并且它会自动由document. 使用选择器可以让我们指定我们只希望在单击document带有 classlogin或的元素时触发事件logout。

于 2013-07-18T17:52:15.853 回答
1

尝试这个

 jQuery(function($){

        $('#login').click(function(){
          if($("#login").hasClass("logout"))
         {
            $(this).removeClass('logout');
            $(this).addClass('login');
            $(this).text('login');
            alert('logged out, ready to login');
        }
       else{
            $(this).removeClass('login');
            $(this).addClass('logout');
            $(this).text('logout');
            alert('logged in, ready to logout');
        }
    });

演示

于 2013-07-18T17:49:40.767 回答
0

最好使用 jQuery 的 toggleClass() 方法。像这样使用它。

 $('#login').click(function(){

            if($(this).hasClass('login'))
            {
                  $(this).text('log in');
                  alert('logged in, ready to logout');
            }
            else
            {
                 $(this).text('logout');
                 alert('logged out, ready to login');
            }
             $(this).toggleClass('login');
        });
于 2013-07-18T17:49:01.433 回答
0

纯娱乐：

$('#login').on('click', function(){
    $(this).text($(this).hasClass('login') ? 'log out' : 'log in').toggleClass('login logout');
    alert($(this).hasClass('login') ? 'logged out. ready to log in.' : 'logged in. ready to log out.');
});

http://jsfiddle.net/qWebw/

于 2013-07-18T18:14:43.513 回答
0

这是一个很好的方法

$(document).on('click', '.login, .logout', function(){
    var current = this.className.match(/login|logout/)[0];
        // Detect the current button name & class ^ 

        opposite = current === 'login' ? 'logout' : 'login';
        // Get the opposite name & class ^ 

   $('.' + opposite).toggleClass('login logout').text(current);
   // Change the opposite ^ 

   $(this).toggleClass('login logout').text(opposite);
   // Change the Current ^

});

演示

于 2013-07-18T18:16:21.133 回答