Demo

Question

我有一个关于在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'）。无论它是什么课，都点击。

由于

Answer 1

即使课程发生变化，事件也会受到约束。您可以将事件委托给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/

Answer 2

使用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事件侦听器只注册一次，当您注册时，您的按钮具有类login。如果您希望以后使用logout侦听器，则需要更新侦听器。代码运行时，有一个.login按钮，但没有.logout按钮，因此.login处理程序已注册，而.logout处理程序将被丢弃。

但是，通过使用$(document).on，您可以在document元素上注册两个事件，这些事件在加载时始终存在，并且它会自动由所有子元素继承。 document。使用选择器，我们可以指定当我们点击document内的login或logout内的元素时，我们只希望触发事件。

Answer 3

试试这个

 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');
        }
    });

Demo

Answer 4

最好使用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');
        });

Answer 5

只是为了好玩：

$('#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/

Answer 6

这是一个很好的方法

$(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 ^

});

如何在Jquery中切换类

6 个答案:

Demo