单击时，切换“真棒字体”备忘单值

Question

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

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

我被迫使用备忘单图标，如下所示：

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

这样，图标在IE8中也显示为OK。

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

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

 $(".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>