0

「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();

}
4

2 に答える 2

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');
}
于 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 Exampleにあります

于 2012-10-24T19:33:56.207 に答える