更改按钮的 InnerHtml 会丢失样式 Jquery Mobile

Question

我有一个函数，我调用了一个名为“toggleCollapse”的按钮 onclick 事件。单击时，我想将按钮的 innet 文本从“折叠”更改为“展开”。下面的代码做到了这一点，但在此过程中也丢失了按钮的所有 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

既然你想“在点击时将按钮的 innet 文本从 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

我建议避免内联 onClick 调用，因为如果您需要跨多个页面/按钮更改它可能会带来管理麻烦。相反，只需将一个类应用于按钮/a 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 Example找到一个工作示例