Question

我有一个函数，我调用了一个名为“toggleCollapse”的按钮onclick事件。我想在单击时将按钮的内联文本从“折叠”更改为“展开”。下面的代码可以做到这一点，但也失去了进程中按钮的所有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调用，因为如果您需要在多个页面/按钮之间进行更改，可能会让管理变得麻烦。而只是将一个类应用于按钮/ 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

找到一个工作示例

更改按钮的InnerHtml失去了样式Jquery Mobile

2 个答案: