クリック時のテキストを期待通りに変更しない

Question

javascriptまたはJqueryで一般的な表示/非表示のメニューを作成しようとしています。 私が持っている問題は、余分なスペースがあり、if文が期待どおりに動作しないように、素晴らしいフォントやブートストラップが.text（）関数を台無しにしているようです。これはクロスブラウザでも動作するようにすることを望んでいます。

$('#list-btn').click(function() { 
 

 
    var el = $('#list-btn') 
 
    console.log(el.text()) 
 

 

 
    if (el.text() == el.text("Hide Instructions")) { 
 
    el.text("Show Instructions"); 
 
    } else { 
 

 
    el.text("Hide Instructions"); 
 
    } 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> 
 
<li> 
 
    <a href="#" class="hidden-sm hidden-xs" data-toggle="tab" id="list-btn"> 
 
    <i class="fa fa-fw fa-list white"></i>&nbsp;Hide Instructions</a> 
 
</li>

Answer 1

を試してみてください。

if (el.text().trim() === "Hide Instructions"){ 

ただし、spanにテキストをラップすることをおすすめします。 text()操作が実行されると、<i>要素が削除されなくなります。

$('#list-btn').click(function() { 
 
    var el = $('span', this) 
 
    console.log(el.text()) 
 
    if (el.text().trim() == "Hide Instructions") { 
 
    el.text("Show Instructions"); 
 
    } else { 
 
    el.text("Hide Instructions"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> 
 
<li> 
 
    <a href="#" class="hidden-sm hidden-xs" data-toggle="tab" id="list-btn"> 
 
    <i class="fa fa-fw fa-list white"></i>&nbsp;<span>Hide Instructions</span></a> 
 
</li>

Answer 2

あなたは比較を修正する必要が

if (el.text().trim() === "Hide Instructions"){...} 

Answer 3

のjQueryコード

<script> 
$(document).ready(function(){ 
    $('#list-btn').off().on('click',function() { 

    var el = $('#list-btn') 
    console.log(el) 


    if (el.text() == "Hide Instructions") { 
    el.text("Show Instructions"); 
    } else { 

    el.text("Hide Instructions"); 
    } 
    }); 
}); 
</script>