33

新しい jquery mobile 1.0 alpha 1 リリースを使用してモバイル アプリを構築していますが、ボタンのテキストを切り替える必要があります。テキストの切り替えは正常に機能しますが、テキストの置換を実行するとすぐに css フォーマットが壊れます。

めちゃくちゃなフォーマットのスクリーンショット: http://awesomescreenshot.com/03e2r50d2

    <div class="ui-bar">
        <a data-role="button" href="#" onclick="Podcast.play(); return false" id="play">Play</a>
        <a data-role="button" href="#" onclick="Podcast.download(); return false" id="download">Download</a>
        <a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">Mark Old</a>
    </div>

$("#consumed").text("Mark New");
4

10 に答える 10

67

ボタンを作成すると、いくつかの要素が追加されます。内部<span>要素は次のようになります。

<a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Mark Old</span>
  </span>
</a>

テキストを変更するには、次のセレクターが必要です。

$("#consumed .ui-btn-text").text("Mark New");
于 2010-10-24T17:48:36.470 に答える
12 
<a data-role="button" href="#" id="consumed">Mark Old</a>

あなたはしたい：

$('#consumed').text('Mark New');
$('#consumed').button('refresh');

その理由は、jQuery モバイルの将来のバージョンとの下位互換性を維持するためです。

于 2012-04-20T15:35:43.023 に答える
9

これとさまざまなオプションをオンラインで読み、より簡単な解決策があると思います。これは、data-role="button" 属性を持つボタンに変換するリンクに対して確実に機能します。

ボタンのテキストを別のスパンに配置し、JavaScript でスパンの内容を変更するだけです。

例えば

<a data-role="button" href="#" id="consumed"><span id="oldBtnText">Mark Old</span></a>

次に、単純な

$('#oldBtnText').html("Old");

仕事をします。jQuery が構造を変更しても問題にはなりません。

于 2012-07-19T13:48:28.720 に答える
8

リンクベースのボタンまたはボタンのいずれかに対してこれを行うための簡単なプラグインを作成しました<input type="button">。だからあなたが持っているなら

<input type="button" id="start-button" val="Start"/>

また

<a href="#" data-role="button" id="start-button">Start</a>

どちらの方法でも、表示されるテキストを変更できます

$("#start-button").changeButtonText("Stop");

プラグインは次のとおりです。

(function($) {
    /*
     * Changes the displayed text for a jquery mobile button.
     * Encapsulates the idiosyncracies of how jquery re-arranges the DOM
     * to display a button for either an <a> link or <input type="button">
     */
    $.fn.changeButtonText = function(newText) {
        return this.each(function() {
            $this = $(this);
            if( $this.is('a') ) {
                $('span.ui-btn-text',$this).text(newText);
                return;
            }
            if( $this.is('input') ) {
                $this.val(newText);
                // go up the tree
                var ctx = $this.closest('.ui-btn');
                $('span.ui-btn-text',ctx).text(newText);
                return;
            }
        });
    };
})(jQuery);

... jQuery Mobile がこれらのボタンをレンダリングする方法に正確に依存するコードを散りばめることは良い考えではないからです。プログラミングのルール: ハックを使用する必要がある場合は、十分に文書化された再利用可能なコードのチャンクに分離します。

于 2011-09-02T06:18:32.060 に答える
3

これは私のために働きます：

$('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text');

解決策：http： //forum.jquery.com/topic/changing-text-works-except-for-buttons

于 2011-10-21T23:00:34.097 に答える
1

のようなマークアップの場合

<button id="consumed">Mark Old</button>

$("#consumed").html("Mark New");
$("span > span", $("#consumed").parent()).html("Mark New");
于 2011-05-30T09:58:58.797 に答える
0

新しい jquery モバイル バージョンでは、ボタン内に内部スパン タグがあります。

したがって、「a」タグのテキストを変更する必要はありませんが、内側のスパンのテキストを変更する必要があります。

例えば

$("#consumed .ui-btn-text").text("test");

于 2012-08-28T21:16:44.513 に答える
0

何らかの理由で、ボタンのテキストを初めて変更したいときに、「ui-btn-text」クラスのスパンがありません。だから私はこのようにそれを回避します：

var button = $("#consumed");
var innerTextSpan = button.find(".ui-btn-text");

// not initialized - just change label
if (innerTextSpan.size() == 0) {
    button.text(label);

// already initialized - find innerTextSpan and change its label    
} else {
    innerTextSpan.text(label);
}
于 2013-09-02T21:11:24.470 に答える
0

簡単な解決策に興味がある人のために、Audero Text Changerというプラグインを作成しました。

于 2013-01-10T15:29:32.480 に答える
0

JQM 1.3.1 の時点で (おそらくそれ以前?)、単純な .text() がサポートされているようです。

于 2013-04-11T16:08:51.850 に答える