Question

我正在尝试使用javascript或Jquery执行典型的“显示/隐藏”菜单。我遇到的问题是字体真棒图标或引导程序似乎弄乱了.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>

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>

点击更改文字不按预期工作

3 个答案: