更改innerhtml按钮失去了样式jQuery手机

Question

我有一个我在按钮上称为" togglecollapse"的函数。我想将按钮的内在文本从"崩溃"更改为单击时"展开"。下面的代码执行此操作，但也失去了该过程中按钮的所有jQuery移动样式。我如何在不必重新加载整个页面的情况下刷新按钮的样式，我只想刷新按钮造型。

<a data-role="button" data-mini="true" data-icon="grid" iconpos="right" onclick="toggleCollapse()">Collapse</a>
function toggleCollapse() {
    var a = $("#collapse_value")
                .attr("value");
    var b;
    if (a == "false") {
        $("#btnCollapse").html("Expand");
        b = true
    } else {
        $("#btnCollapse").html("Collapse");
    }

    $('#btnCollapse').button();
}

Answer 1

因为您想"单击时将按钮的内在文本从 Collapse更改为 Expand"，为什么不使用 .text()函数而不是 .html()函数。

.html()功能映射到innerHTML属性。

.text()功能映射到innerText属性。

function toggleCollapse() {
    var a = !! $('#collapse_value').val(); //use !! to convert value to a boolean
    $('#btnCollapse').text(a ? 'Expand' : 'Collapse');
}

这应该替换按钮的文本标签而不会影响样式，但是您可以使用.button()方法更改按钮标签（因为您似乎正在使用jQuery UI按钮）。这是一个例子：

function toggleCollapse() {
    var a = !! $('#collapse_value').val(); //use !! to convert value to a boolean
    $('#btnCollapse').button('option', 'label', a ? 'Expand' : 'Collapse');
}

Answer 2

我建议避免使用内联通话，因为如果您需要在几个页面/按钮上更改它，可能会麻烦。而是只需在按钮/一个HREF上应用一个类。

<a data-role="button" data-mini="true" data-icon="grid" iconpos="right" class="toggleCollapse btn">Collapse</a>
(function(){
  $('.toggleCollapse').on('click', function(e){
      e.preventDefault();
      $(this).text( ($(this).text() == 'Collapse') ? 'Expand' : 'Collapse' );
  });
$('.btn').button();
})()​;​

可以在JSFIDDLE示例