web-dev-qa-db-ja.com

jQueryUIボタンのテキストを置き換えるにはどうすればよいですか？

JQueryUIで使用するボタンがあります（簡略化）。

<button id="mybutton">Play<button>
<script>
$("#mybutton").button().toggle(
    function(){
       $(this).text('Stop');
    },
    function(){
       $(this).text('Start');
    },
);
</script>

このコードは、ボタンウィジェットにボタンを作成するときに、ボタン内に新しいスパンが追加されるため、ボタンの外観を壊します。だから私は今このようにボタンの値を変更しています

$(this).find('span').text('Stop');

ボタンをブラックボックスとして扱うことができず、中に入る必要があるため、これはハッキーです。

これを行うためのクリーンな方法はありますか？

jqueryjquery-uibutton
31
Andrei R

代わりに、jQueryUIボタンのlabelオプションを使用できますか？

$("#mybutton").button().toggle(function() {
   $(this).button('option', 'label', 'Stop');
}, function() {
   $(this).button('option', 'label', 'Start');
});

jsbinプレビューはこちら

63
gnarf

テキストを変更した後、.button（ "refresh"）メソッドを使用できます。

 $（ "＃mybutton"）。button（）。toggle（
 function（）{
 $（this）.text（ 'Stop'）。button（ "refresh" ）; 
}、
 function（）{
 $（this）.text（ 'Start'）。button（ "refresh"）; 
}、
）;

http://jqueryui.com/demos/button/#method-refresh

6
ajpiano

.button（）を呼び出してjQuery UIボタンを作成した後、テキストは元のボタン要素から削除され、ボタン要素内の<span class = ui-button-text></span>に配置されているようです。

このようなものが機能します：

$("#myButton > .ui-button-text").text("New Text");
3
mikehoncho

あなたがまだこれに対する答えを探しているかどうかはわかりませんが、私はあなたの質問を見つけました。ボタンからコードを見ると、jQueryは1つまたは2つのタグを追加します。そのため、全体を書き直す代わりに、ボタン。html（）を同じhtmlに置き換えましたが、javascript search（）を使用してラベルを切り替えました。それは醜いですが、それは動作します。また、ボタンラベルを使用して正しく切り替えます。

var bdef = $(this).html();
var ht = "";
if (bdef.search("Nuevo") != -1) { 
    ht = $(this).html();
    $(this).html(ht.replace("Nuevo", "Lista"));
}
else {
    ht = $(this).html();
    $(this).html(ht.replace("Lista", "Nuevo"));
}
1
Stephen O'Flynn

.button("refresh")を実行する必要があります

$('#mybutton').text('Save').button("refresh");
0
user1464277

ボタンのIDは常にmyButtonですか？はいの場合は、

$("#myButton").text('Stop');

0
psychotik