0

これは私がここで見つけたスクリプトで、.liveから.onに変更しました

クラスログインがアタッチされたアンカーがあります。ログアウトするとjqueryを使用してフォームが開き、現在のアンカーのテキストとクラスがログアウトに変更されます。

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

クリックするとすべて正常に動作し、すべてが変更されますが、そのアンカーをもう一度クリックすると、ログアウト機能がアクティブになりません。jqueryまたはdomがそれ自体を更新する必要があることと関係があることは知っていますが、それを機能させる方法がわかりませんか？

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", onSignOutClicked);
$('.login').on("click", onSignInClicked);

私はまた、別の方法である私自身のものを以下に書きました、しかしここで問題はそれが変更されたとき古いクラスがまだ働いているということです。

$(".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);
            }
        }                   
    }); 

});

エーテル法の助けをいただければ幸いです、ありがとうございます。

4

3 に答える 3

1

要素のクラスを変更しても、それにバインドされているイベントは変更されません。イベントの委任は、必要なものに近くなります。

$(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");
});
于 2013-02-14T19:28:19.877 に答える
0

やったほうがいい：

 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();
    });
于 2013-02-14T19:20:27.823 に答える
0

私の結果を見たいすべての人にとって、これは私がケビン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;
});
于 2013-02-14T21:48:56.390 に答える