javascript - 单击时更改文本未按预期工作

Question

我正在尝试使用 javascript 或 Jquery 执行典型的显示/隐藏菜单。我遇到的问题是，字体很棒的图标或 Bootstrap 似乎弄乱了 .text() 函数，因此存在额外的间距，并且我的 if 语句无法按预期工作。希望它也能跨浏览器工作。

$('#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 中。 。它将阻止<i>当 text() 时元素被删除执行操作。

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