javascript - 单击时，切换 Font Awesome 备忘单值

Question

我将 Font Awesome 项目用于图标，因为当我使用它时它们不会在 IE8 中显示:

<i class="fa fa-bars fa-2x"></i>

我不得不这样使用备忘单图标:

<i class="mobile-search-icon fa fa-lg">&#xf002;</i> 

这样，图标在 IE8 中也显示正常。

现在，问题是...使用备忘单图标，如何在切换时用另一个值替换值？请检查下面的示例，您最初看到的是搜索图标，点击后我应该看到一个关闭图标，再点击一次，再次显示搜索图标。

下面的示例是目前为止我找到的最接近的方法，如果可能我需要一些帮助。谢谢

$(".mobile-search-icon").on('click', function(e) {
  $(this).siblings(".search-container").fadeToggle(500);
  if ($.trim($(this).text()) === '') {
    $(this).text('');
  } else {
    $(this).text('');
  }

  return false;
});

.search-bar {
  display: table-cell;
  vertical-align: middle;
}
.mobile-search-icon {
  color: #fff;
  display: block;
  line-height: 50px;
  width: 150px;
  z-index: 1;
  background-color: black;
  text-align: center;
  padding: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="search-bar">
  <i class="mobile-search-icon fa fa-lg">&#xf002;</i>
</div>

Answer 1

不确定您想要什么，但它看起来很整洁。我在代码段 1 上制作了一个使用 FA 的 Unicode 的演示。

我重新阅读了你的问题，我想我明白了......你只是想在 2 个图标之间切换按钮。如果是这样，请查看代码段 2。您的问题是您正在使用 .text() 方法，该方法将添加未解析的纯文本。 .html() 将获取文本并将其解析为 HTML，以便将其呈现为文本所代表的内容，而不是字面上的内容。

片段 1

var tgt = document.querySelector('.search-bar');
var btn = document.querySelector('.search-btn');

btn.addEventListener('click', function(e) {
  var res = document.getElementById('result');
  var txt = document.getElementById('inputText').value;
  var mom = res.parentNode;
  if (res) {
    mom.removeChild(res);
  }
  genFA(txt);
}, false);


function genFA(x) {
  var baseUni = "&#xf";
  var iEle = document.createElement('i');
  iEle.id = 'result';
  iEle.classList.add('fa');
  iEle.classList.add('fa-lg');
  iEle.innerHTML = baseUni + x;
  return tgt.appendChild(iEle);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  font: 400 16px/1.45'Verdana';
}
.search-bar {
  display: table;
  
  position: relative;
  height: 80px;
  padding: 5px 15px;
  width: 500px;
}
.search-btn {
  color: #fff;
  display: table-cell;
  line-height: 50px;
  width: 35%;
  background-color: black;
  text-align: center;
  padding: 10px 20px;
}
#inputText {
  display: table-cell;
  width: 25%;
  padding: 0 5px;
  font: 400 20px/30px'Consolas';
  text-align: center;
  vertical-align: middle;
}
#result {
  color: #000;
  line-height: 33px;
  width: 35%;
  background-color: #fff;
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<fieldset class="search-bar">
  <legend>Font-Awesome Unicode</legend>
  <input id="inputText">
  <i class="search-btn fa fa-lg">&#xf002;</i>
  <i id="result" class="fa fa-lg">&nbsp;</i>
</fieldset>

<p>Enter: 3 digit hexidecimal number.</p>
<p>Range: 000 - 2b1</p>
<p>Font-Awesome v.4.6.3</p>

片段 2

$(function() {
  $(".mobile-search-icon").on('click', function(e) {
    if ($(this).hasClass('on')) {
      $(this).html('').toggleClass('on');
    } else {
      $(this).html('').toggleClass('on');
    }
  });
});

.search-bar {
  color: #fff;
  display: table-cell;
  vertical-align: middle;
  line-height: 30px;
  width: 150px;
  background-color: black;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}
.mobile-search-icon {
  width: 100%;
}
.on {
  opacity: 1;
  transition: opacity 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<div class="search-bar">
  <i class="mobile-search-icon fa fa-lg on">&#xf002;</i>
</div>