Javascript jQuery切换按钮不工作。在（'；单击'；）

这是我在这里找到的一个脚本，我从.live改为.on

我有一个带有类登录的锚，注销将使用jquery打开一个表单，并将当前锚的文本和类更改为注销

<li><a href="javascript:void(0)" class="login">Login</a></li>

我也在下面写了我自己的一个，这是一个替代方法，但这里的问题是，旧类在被更改时仍在工作

$(".sendLoginForm").click(function(){
    $("#loginErr").html("");
    $(".sendLoginForm").css({"color":"#ff3019"});
    $(".sendLoginForm").spin("small", "#FFF");                          
    $.ajax({  
        type: "POST",  
        url: "../_/login.php",  
        data: $("#loginForm").serialize(),  
        dataType: "json",  
        success: function(data){
            if (data.err){
                $("#loginErr").html(data.err);
            }else{
                //$(".openLoginForm").closest('li').remove();
                //$(".ulNavigator").append('<li><a href="javascript:void(0)" class="logout">Logout</a></li>');
                //$('.openLoginForm').toggleClass('.logout')
                //$(".openLoginForm").removeClass('.openLoginForm').addClass('logout');
                $(".openLoginForm").toggleClass('openLoginForm logout');
                $('.login').fadeOut("fast");
                $(".success").html(data.success);
                $('.success').fadeIn("fast");
                $('#loginForm')[0].reset();
                setTimeout(function() {
                      $('.success').fadeOut("fast");
                }, 3000);
                }
            $(".sendLoginForm").spin(false);
            $(".sendLoginForm").css({"color":"#FFF"});
        }                       
    });
    return false;
});

$(document).on("click", ".logout", function(){
    $.ajax({  
        type: "POST",  
        url: "../_/logout.php",  
        data: {logout : "kick"},  
        dataType: "json",  
        success: function(data){
            if (data.success){
                $(".success").html(data.success);
                $(".success").fadeIn("fast");
                setTimeout(function() {
                      $('.success').fadeOut("fast");
                }, 3000);
            }
        }                   
    }); 

});

$（.sendloginfo”）。单击（函数（）{
$（“#loginErr”）.html（“”）；
$（“.sendloginfo”）.css（{“color”：“#ff3019”}）；
$（“.sendloginfo”）.spin（“小的”、“FFF”）；
$.ajax（{
类型：“POST”，
url:“../\u/login.php”，
数据：$（“#loginForm”）.serialize（），
数据类型：“json”，
成功：功能（数据）{
if（data.err）{
$（“#loginErr”）.html（data.err）；
}否则{
//$（“.openLoginForm”）.closest（'li'）.remove（）；
//$（“.ulNavigator”）.append（“
”）；
//$（'.openLoginForm'）.toggleClass（'.logout'））
//$（“.openLoginForm”）.removeClass（'.openLoginForm'）.addClass（'logout'）；
$（“.openLoginForm”）.toggleClass（'openLoginForm logout'）；
$（'.login'）.fadeOut（“快速”）；
$（“.success”）.html（data.success）；
$（'success'）.fadeIn（“fast”）；
$（'#loginForm'）[0].reset（）；
setTimeout（函数（）{
$（'.success'）。淡出（“快速”）；
}, 3000);
}
$（“.sendloginfo”）.spin（false）；
$（“.sendloginfo”）.css（{“color”：“#FFF”}）；
}                       
});
返回false；
});
$（文档）。在（“单击”，“注销”，函数（）上）{
$.ajax（{
类型：“POST”，
url:“../\u/logout.php”，
数据：{注销：“踢”}，
数据类型：“json”，
成功：功能（数据）{
if（data.success）{
$（“.success”）.html（data.success）；
$（“.success”）.fadeIn（“fast”）；
setTimeout（函数（）{
$（'.success'）。淡出（“快速”）；
}, 3000);
}
}                   
}); 
});

非常感谢您对乙醚法的任何帮助。

您应该：

 function onSignOutClicked() {
        // Convert the clicked button into a sign-in button
        $(this)
            .attr('class', 'login')
            .attr('title', 'Login')
            .text('Sign in');
    }

    function onSignInClicked() {
        // Convert the clicked button into a sign-out button
        $(this)
            .attr('class', 'logout')
            .attr('title', 'Logout')
            .text('Sign out');
    }

    $('.logout').on("click", function(){ 
    onSignOutClicked();
    });
    $('.login').on("click", function(){ 
    onSignInClicked();
    });

---

更改元素的类不会更改绑定到它的事件。活动委派将更接近您想要的：

$(document).on('click','.logout',onSignOutClicked);
$(document).on('click','.login',onSignInClicked);

此外，不要使用.attr更改元素的类，而是使用.addClass（）、.removeClass和/或.toggleClass

$(this).addClass("logout").removeClass("login")

考虑到这一点，您可以通过以下方式简化整个流程：

$(".login,.logout").on("click",function(){
    var $this = $(this);
    $this.toggleClass("login logout");
    if ( $this.is(".login") ) {
        $this.attr("title","Login");
    }
    else {
        $this.attr("title","Logout");
    }    
});

您可以通过以下方式使其变小：

$(".login,.logout").on("click",function(){
    var $this = $(this);
    $this.toggleClass("login logout");
    $this.attr("title", $this.is(".login") ? "Login" : "Logout");
});

---

对于所有想看到我的结果的人来说，这是一个我想在Kevin B的帮助下做的工作示例

谢谢大家

$(".login,.logout").on("click",function(){
    var $this = $(this);
    if ( $this.is(".login") ) {
        $(".loginFormBox").fadeIn("fast");      
    }
    else {
        $this.text("Login");
        $this.toggleClass("login logout");
        $.ajax({  
        type: "POST",  
        url: "../_/logout.php",  
        data: {logout : "kick"},  
        dataType: "json",  
        success: function(data){
            if (data.success){
                $(".success").html(data.success);
                $(".success").fadeIn("fast");
                setTimeout(function() {
                      $('.success').fadeOut("fast");
                }, 3000);
            }
        }                   
        }); 
    }    
});

$(".sendLoginForm").click(function(){
    $("#loginErr").html("");
    $(".sendLoginForm").css({"color":"#ff3019"});
    $(".sendLoginForm").spin("small", "#FFF");                          
    $.ajax({  
        type: "POST",  
        url: "../_/login.php",  
        data: $("#loginForm").serialize(),  
        dataType: "json",  
        success: function(data){
            if (data.err){
                $("#loginErr").html(data.err);
            }else{
                $(".login").toggleClass("login logout");
                $(".logout").text("Logout");
                $('.loginFormBox').fadeOut("fast");
                $(".success").html(data.success);
                $('.success').fadeIn("fast");
                $('#loginForm')[0].reset();
                setTimeout(function() {
                      $('.success').fadeOut("fast");
                }, 3000);
                }
            $(".sendLoginForm").spin(false);
            $(".sendLoginForm").css({"color":"#FFF"});
        }                       
    });
    return false;
});

---

与其使用

javascript:void（0）

，为什么不在函数中简单地使用

preventDefault（）

？感谢Sparky，我不知道这会起到同样的作用，我在表单提交中使用了preventDefault，我需要进一步研究哈哈。KudosIt并不完全相同，但是在click处理程序中使用

href=“#”

和适当的

preventDefault（）

将是一个更好的实现，依我看。

.click（函数（e）{e.preventDefault（）。
$(".login,.logout").on("click",function(){
    var $this = $(this);
    if ( $this.is(".login") ) {
        $(".loginFormBox").fadeIn("fast");      
    }
    else {
        $this.text("Login");
        $this.toggleClass("login logout");
        $.ajax({  
        type: "POST",  
        url: "../_/logout.php",  
        data: {logout : "kick"},  
        dataType: "json",  
        success: function(data){
            if (data.success){
                $(".success").html(data.success);
                $(".success").fadeIn("fast");
                setTimeout(function() {
                      $('.success').fadeOut("fast");
                }, 3000);
            }
        }                   
        }); 
    }    
});

$(".sendLoginForm").click(function(){
    $("#loginErr").html("");
    $(".sendLoginForm").css({"color":"#ff3019"});
    $(".sendLoginForm").spin("small", "#FFF");                          
    $.ajax({  
        type: "POST",  
        url: "../_/login.php",  
        data: $("#loginForm").serialize(),  
        dataType: "json",  
        success: function(data){
            if (data.err){
                $("#loginErr").html(data.err);
            }else{
                $(".login").toggleClass("login logout");
                $(".logout").text("Logout");
                $('.loginFormBox').fadeOut("fast");
                $(".success").html(data.success);
                $('.success').fadeIn("fast");
                $('#loginForm')[0].reset();
                setTimeout(function() {
                      $('.success').fadeOut("fast");
                }, 3000);
                }
            $(".sendLoginForm").spin(false);
            $(".sendLoginForm").css({"color":"#FFF"});
        }                       
    });
    return false;
});