Блог

У меня есть этот html:

 <div id="signbtn">
<a id="login-link" class="btnsignin" title="Login">Sign in</a>
</div>
  

После успешного входа в систему я могу изменить класс привязки на «btnsignout» и заголовок на «Выход». Пока все хорошо. И теперь, когда я нажимаю на привязку для выхода, страница выхода загружается в раздел содержимого, но заголовок привязки не меняется обратно на «Вход». Нажатие на нее ничего не делает. Привязка отключена.

Может кто-нибудь взглянуть и сообщить мне, какие изменения мне нужно внести в функцию jquery. Спасибо за всю помощь!

Вот мой код jquery:

 $('#signbtn').click(function() { 
    $.each($(this).children('a'), function(){
    if($(this).hasClass('btnsignout')){                     
        $('#signbtn a').attr('name', 'Sign In');
        $(this).removeClass('btnsignout');
        $(this).addClass('btnsignin');
        $("#content").load("../admin/logout.php");      
    }

    })
    return false;
});
  

Вот пример того, как я бы это сделал.

Я думаю, что использование «live» упрощает задачу, и таким образом у вас может быть более одной кнопки в вашем документе, и это будет работать (потребуются некоторые изменения, чтобы изменить все кнопки с входа на выход, а не только нажатую кнопку).

Объявление функций events отдельно также облегчает понимание (я думаю).

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

    // Exec ajax call to sign out and put result in #content
    $('#content').load('../admin/logout.php');
}

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

    // Exec ajax call to sign out and put result in #content
    $('#content').load('../admin/login.php');
}

$('.btnsignout').live(click, onSignOutClicked);
$('.btnsignin').live(click, onSignInClicked);
  

Возможно, вы могли бы создать из этого плагин jQuery. Таким образом, было бы действительно проще применить его к HTML-документу, и вы могли бы перегруппировать все функции входа и выхода в этом плагине.

Вот пример плагина (я не выполнял этот код, возможно, есть ошибки) :

 // Self executing function, to work in a protected scope
(function(window, $) {

    function LoginManager(contentNode, options) {

        // register instance properties
        this.contentNode = contentNode;
        this.options = options;


        // Convert instance methods to be able to bind them to events
        var _this = this,
            so = this.onSignOutClicked,
            si = this.onSignInClicked;

        this.onSignOutClicked = function () {
            return so.apply(_this, arguments);
        };

        this.onSignInClicked = function () {
            return si.apply(_this, arguments);
        };

        // Attach click events to elements in the HTML doc
        $('.'   this.options.loginBtnCls).live('click', this.onSignInClicked);
        $('.'   this.options.logoutBtnCls).live('click', this.onSignOutClicked);
    }

    // Define methods for the LoginManager class
    LoginManager.prototype = {

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

            // Exec ajax call to sign out and put result in #content
            $(this.contentNode).load('../admin/logout.php');
        },

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

            // Exec ajax call to sign out and put result in #content
            $(this.contentNode).load('../admin/login.php');
        }

    };

    // We define the loginManager plugin, if it doesn't already exist
    $.fn.loginManager = $.fn.loginManager || function(options) {
        options = $.extend({}, $.fn.loginManager.options, options);

        return this.each(function() {
            new LoginManager(this, options);
        });
    };

    // default options for the plugin
    $.fn.loginManager.options = {
        loginBtnCls : 'btnsignout',
        logoutBtnCls : 'btnsignin'
    };

}(this, this.jQuery));
  

Извините, у меня было немного времени, чтобы убить 🙂

Нико

Вам нужно изменить .text или .html , а не name поскольку у привязок нет name атрибута:

 $('#signbtn a').text('Sign In');
  

Измените имя атрибута с ‘name’ на ‘title’ здесь: $('#signbtn a').attr('name', 'Sign In');