Javascript 单击“不按预期工作”时更改文本

我正在尝试使用javascript或Jquery执行典型的显示/隐藏菜单。 我遇到的问题是，字体可怕的图标或引导程序似乎弄乱了.text（）函数，因此有额外的间距，并且我的if语句无法按预期工作。希望这也能在跨浏览器中发挥作用

$（'#列出btn'）。单击（函数（）{
变量el=$（“#列表btn”）
console.log（el.text（））
如果（el.text（）==el.text（“隐藏指令”））{
el.文本（“显示说明”）；
}否则{
el.文本（“隐藏说明”）；
}
});


试试看

你需要纠正这个比较

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

但是，我建议您将文本包装成
span
。当执行
text（）
操作时，它将防止删除
元素


$（'#列出btn'）。单击（函数（）{
变量el=$（'span'，此）
console.log（el.text（））
如果（el.text（）.trim（）=“隐藏指令”）{
el.文本（“显示说明”）；
}否则{
el.文本（“隐藏说明”）；
}
});


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>


$（文档）.ready（函数（）{
$（'#list btn'）.off（）.on（'click'，function（））{
变量el=$（“#列表btn”）
控制台日志（el）
如果（el.text（）=“隐藏指令”）{
el.文本（“显示说明”）；
}否则{
el.文本（“隐藏说明”）；
}
});
});
Try:
if（el.text（）=“Hide Instructions”）
@Fr33d0m在控制台上打印文本时仍显示空格，并删除图标。我认为第一个if语句由于空格的原因与文本不匹配。这非常有效。谢谢，你的解释也很好！我会接受的！
<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>