0

我有一个函数，我调用一个名为“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();

}
4

2 回答 2

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');
}
于 2012-10-24T19:36:55.870 回答
0

我建议避免内联 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 示例中找到一个工作示例

于 2012-10-24T19:33:56.207 回答