Question

我在导航栏中有一个bootstrap3登录/退出按钮。我想在单击按钮时切换文本和图标。

以下是导航栏代码：

using System.Diagnostics; 
using System.Net.Mail;
using MailKit;
using MailKit.Search;
using MailKit.Net.Imap;

void test()
    {
        const int period = 1000 * 60 * 5; //5 minutes
        do
        {
            using (var client = new ImapClient())
            {
                client.Connect(serverAddress, 993, true);
                client.Authenticate(username, password);
                var inbox = client.Inbox;
                inbox.Open(FolderAccess.ReadOnly);
                SearchQuery query = SearchQuery.SubjectContains("RUNTESTING");
                foreach (var uid in inbox.Search(query))
                {
                    var process = Process.Start("testing.exe");
                    process.WaitForExit();
                    using (var client = new SmtpClient())
                    {
                        var message = new MimeMessage();
                        message.Subject = "Testing complete";
                        client.Connect(serverAddress, port, false);
                        client.AuthenticationMechanisms.Remove("XOAUTH2");
                        client.Authenticate(username, password);
                        client.Send(message);
                        client.Disconnect(true);
                    }
                }
                client.Disconnect(true);
            }
            System.Threading.Thread.Sleep(period);
        } while (true);
    }

我找到了下面的代码，它完美无缺：

<li><a id="login" class="showLogin" href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

我将此代码放入函数中，但我收到错误：

＆＃34;无法设置属性＆＃39; nodeValue＆＃39;未定义＆＃34;

以下是代码：

$('#login').on('click', function () {

    var $el = $(this)

    textNode = this.lastChild;
    $el.find('span').toggleClass('glyphicon-log-out glyphicon-log-in');
    textNode.nodeValue = ($el.hasClass('showLogin') ? ' Logout' : ' Login')
    $el.toggleClass('showLogin');
});

问题似乎是这样做的区别：

function change_login_button(){
    var $el = $('#login')

    textNode = $el.lastChild
    $el.find('span').toggleClass('glyphicon-log-out glyphicon-log-in');
    textNode.nodeValue = ($el.hasClass('showLogin') ? ' Logout' : ' Login')
    $el.toggleClass('showLogin'); 
}

和此：

var $el = $(this)

有人可以告诉我我做错了什么，或者是否有更简单的方法来切换引导导航按钮？

Answer 1

在span中添加Login文本，然后使用jquery：last-child选择器：

var $el2 = $('#login span:last-child');

在此处查看此小提琴：fiddle

$(document).ready(function() {
  $('#login').on('click', function() {
    change_login_button();
  });
});

function change_login_button() {
  var $el = $('#login');
  var $el2 = $('#login span:last-child');
  textNode = $("#login span:last-child").text();
  $el.find('span.glyphicon').toggleClass('glyphicon-log-out glyphicon-log-in');
  textNode = ($el.hasClass('showLogin') ? 'Logout' : 'Login');
  $el2.text(textNode);
  $el.toggleClass('showLogin');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="list-style-type:none">
  <li>
    <a id="login" class="showLogin" href="#">
      <span class="glyphicon glyphicon-log-in">	
</span>  <span>Login</span>
    </a>
  </li>
</ul>

单击更改引导按钮文本和图标

1 个答案: