jQuery UI 按钮图标：e.extra.match 不是函数答案

【问题标题】：jQuery UI button icon: e.extra.match is not a functionjQuery UI 按钮图标：e.extra.match 不是函数
【发布时间】：2017-09-20 03:47:06
【问题描述】：

尝试在jquery-ui button widget 中使用图标：

<!DOCTYPE html>
<html>
<head>
    <title></title> 

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>

    <span class="ui-icon ui-icon-gear"></span>
    <button id="btn">Button</button>


<script>

    $("#btn").button({
        icon: {icon: "ui-icon-gear"}
    });

</script>

</body>
</html>

我收到以下错误：

关于如何解决此问题的任何提示？

【问题讨论】：

您是否要在您的按钮中保留“按钮”文本？还是您想影响一个仅图标的按钮？
@Ito Pizarro 最终目标是拥有一个仅图标按钮，但无论按钮是否带有文本，我都会收到该错误

标签： html jquery-ui button widget icons

【解决方案1】：

您正在冗余地复制配置对象。

$( [selector] ).button( {
    icon: "ui-icon-gear" // you don't have to pass `icon` its own object here
} );

而且，要抑制“按钮”文本，您可以添加 showLabel: false 属性。此外，您的<span class="ui-icon ui-icon-gear"></span> 无需在button 中呈现图标。

$("#button-example-1").button({
  icon: "ui-icon-gear"
});
$("#button-example-2").button({
  icon: "ui-icon-gear",
  showLabel: false
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<button id="button-example-1">Button with icon and text</button>
<button id="button-example-2">Icon only button</button>

【讨论】：

谢谢，jquery docs 上的代码 sn-p 让我很困惑。 span 图标只是为了表明 jquery 图标类工作正常