jquery - 在 jquerymobile 标题中交换登录/注销按钮

Question

HTML

<div data-role="header">
    <a href="index.html" data-role="button" data-icon="home" data-iconpos="left">主頁</a>
    <h1>header/h1>
    <a href="#page_login" data-role="button" id="button_login" data-icon="false" data-iconpos="false">login</a>
    <a href="#page_dashboard" data-role="button" id="button_logout" data-icon="false" data-iconpos="false">logout</a>
</div><!-- /header -->

所以我有一个登录功能，原来在首页显示时注销是隐藏的，登录成功后，登录按钮将被隐藏并显示注销按钮。但问题是注销按钮会掉到下一行，我如何用注销按钮替换登录位置完全相同？

Answer 1

为什么不只使用一个按钮并更改按钮的文本和类别。

然后在你的代码中你可以

$("#button").on ('click', function (e) {
    if ( $( this ).hasClass( "login" ) {
　　　　$( this ).removeClass( "login" );
       $( this ).addClass( "logout" );
       doLogin();
    } else {
　　　　$( this ).removeClass( "logout" );
       $( this ).addClass( "login" );
       doLogout();
    }
});

Answer 2

静态给出登录按钮类ui-btn-right，然后使用下面的代码。

演示

// hide logout button initially
$(document).on('pagebeforeshow', function () {
  $('#button_logout').toggle();
});

// hide login and show logout
$(document).on('click', '#button_login', function () {
  $('#button_logout').addClass('ui-btn-right').toggle();
  $(this).removeClass('ui-btn-right').toggle();
});

// hide logout and show login
$(document).on('click', '#button_logout', function () {
  $('#button_login').addClass('ui-btn-right').toggle();
  $(this).removeClass('ui-btn-right').toggle();
});