Question

我的wordpress网站上有一个搜索栏，并使用jquery来替换＆＃34;搜索＆＃34;单词，并希望使用字体真棒的图标。然而，它只显示字体真棒代码，而不是图标。

如何使用字体真棒图标替换提交按钮文本？

我似乎无法编辑＆＃34;值＆＃34;因为这是侧边栏。这就是我到目前为止......

<form role="search" method="get" id="searchform" class="searchform" action="http://localhost/">
                <div>
                    <label class="screen-reader-text" for="s">Search for:</label>
                    <input type="text" value="" name="s" id="s">
                    <input type="submit" id="searchsubmit" value="Search"></input>
                </div>
            </form>


<script type="text/javascript">
    var $elem = $("#searchsubmit");
    $elem.html("<i class='fa fa-eye'></i>");
</script>

Answer 1

提交按钮必须是<button>而不是<input type="button"，因为输入不能包含HTML内容，但button元素可以。

注意：input元素样式的副作用是将FA类直接应用于它们不起作用。该图标仅在内联元素上可见，例如span或i（FA推荐）。

改为设置HTML：

<script type="text/javascript">
    var $elem = $("#searchsubmit");
    $elem.html("<i class='fa fa-eye'></i>");
</script>

JSFiddle： http://jsfiddle.net/TrueBlueAussie/JfGVE/907/

使用OP自己的HTML进行更新（更正为button类型）：http://jsfiddle.net/TrueBlueAussie/JfGVE/909/

e.g。

<form role="search" method="get" id="searchform" class="searchform" action="http://localhost/">
  <div>
    <label class="screen-reader-text" for="s">Search for:</label>
    <input type="text" value="" name="s" id="s">
    <button type="submit" id="searchsubmit" value="Search"></button>
  </div>
</form>

如果您无法控制源代码，则可以动态添加按钮并替换原始按钮。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/JfGVE/911/

var $elem = $("#searchsubmit");
$elem.replaceWith('<button type="submit" id="searchsubmit" value="Search"><i class="fa fa-eye"></i></button>');

或只是

$("#searchsubmit").replaceWith('<button type="submit" id="searchsubmit" value="Search"><i class="fa fa-eye"></i></button>');

JSFiddle： http://jsfiddle.net/TrueBlueAussie/JfGVE/912/

Answer 2

我猜你需要的是改变element的风格。 e.g。

document.getElementById("searchsubmit").className = "fa fa-eye"

Answer 3

如果提交按钮是<button>而不是<input>，那么您可以使用以下代码：

var elem = document.getElementById("searchsubmit");
elem.innerHTML = "<i class='fa fa-eye'></i>";

但是，如果在DOM加载时没有事件监听器，那么您应该将代码包装在自执行函数中并将其放在HTML的末尾。

<script type="text/javascript">
(function(){
    var elem = document.getElementById("searchsubmit");
    elem.innerHTML = "<i class='fa fa-eye'></i>";
})();
</script>

更新：这样，您将限制名为elem的变量的范围并正确优化您的脚本。

如何在jquery中编写html代码？

3 个答案: