изменить текст и значок кнопки начальной загрузки при нажатии

Question

У меня есть кнопка входа/выхода bootstrap3 в навигационной панели. Я хотел бы переключить текст и значок, когда нажимается кнопка.

Вот код Navbar:

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

Я нашел ниже код, и он прекрасно работает:

$('#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'); 
}); 

Я ставлю этот код в функцию, но я получаю сообщение об ошибке:

"Невозможно установить свойство 'nodeValue' неопределенных"

Вот код:

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) 

и это:

var $el = $('#login') 

Может кто-нибудь сказать мне, что я делаю неправильно, или если есть более простой способ переключить кнопку навигационной кнопки загрузки?

Answer 1

Добавить Входа текст внутри диапазона, а затем использовать JQuery: селектор последнего ребенка, как:

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"> \t 
 
</span> <span>Login</span> 
 
    </a> 
 
    </li> 
 
</ul>