Как заменить текст кнопки 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');

Это взломанно, потому что я больше не могу лечить кнопку как черный ящик и должен войти внутрь.

Есть ли чистый способ сделать это?

Ответы

Ответ 1

Возможно, вместо этого вы могли бы использовать опцию label для кнопки jQuery UI?

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

jsbin Предварительный просмотр здесь

Ответ 2

Вы можете использовать метод .button( "refresh" ) после изменения текста.

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

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

Ответ 3

после вызова .button() для создания пользовательского интерфейса jQuery, текст кажется удаленным из исходного элемента кнопки и помещен в <span class = ui-button-text></span> внутри элемента кнопки.

Что-то вроде этого будет работать:

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

Ответ 4

Я не знаю, если вы все еще ищете ответ на этот вопрос, но я нашел ваш вопрос. Если вы посмотрите на код с помощью кнопки, jQuery добавит тег или два. Поэтому вместо того, чтобы переписывать все это, я заменил кнопку .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"));
}

Ответ 5

Всегда ли идентификатор кнопки myButton? Если да, то просто используйте

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

Ответ 6

Вам нужно сделать .button("refresh")

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