jQueryのUIのボタンアイコン：e.extra.matchは<a href="http://api.jqueryui.com/button/" rel="nofollow noreferrer">jquery-ui button widget</a>のアイコンを使用しようとして機能

ではありません。jQueryのUIのボタンアイコン：e.extra.matchは<a href="http://api.jqueryui.com/button/" rel="nofollow noreferrer">jquery-ui button widget</a>のアイコンを使用しようとして機能

キャッチされない例外TypeError：e.extra

<!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>

私は、次のエラーを得ました。（無名関数）.__クラス（https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:8956） at t。（無名関数）。（無名関数）._ toggleClass（https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:9473） at t。（無名関数）。（無名関数）._ addClass（https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:9265）（匿名関数）。（匿名関数）。（匿名関数）.__ updateIcon（https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499）時には、（匿名関数の）（匿名関数）。 tにおける_enhance（https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:8:17358）。（匿名関数）。（匿名関数）._強化（https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499） tで。（匿名関数）。（匿名関数）._トンで（https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:8:17057）を作成します。（匿名関数）。（無名関数は）（https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499トンで）。（匿名関数）。（匿名関数）.T（https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4326）

この問題を解決する方法上の任意のヒントを作成します._？

出典

2017-04-23 revy

あなたのボタンに "ボタン" のテキストを維持しようとしていますか？または、アイコンのみのボタンに影響を与えようとしていますか？ –

@Ito Pizarro最終的な目標は、アイコンのみのボタンを持つことですが、ボタンにテキストの有無にかかわらずエラーが表示されます – revy

あなたは構成オブジェクトを重複して複製しています。

$([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>

出典

2017-04-23 13:20:46

ありがとう、jqueryドキュメントのコードスニペットは私を混乱させます。スパンアイコンは、jqueryアイコンクラスが正しく機能していることを示していました – revy

jQueryのUIのボタンアイコン：e.extra.matchは<a href="http://api.jqueryui.com/button/" rel="nofollow noreferrer">jquery-ui button widget</a>のアイコンを使用しようとして機能

答えて

関連する問題