1

jQM スタイルを失わずに dom 要素のテキストを変更するにはどうすればよいですか? - ほとんどのアイテムは .text('sometext') と呼ぶことができますが、データの役割がボタンのリンクやラジオ ボタンのラベルなど、特定の要素で問題が発生します - jQM のスタイルが乱れます。

以下の関数を思いつきましたが、これらのエッジケースをどのように識別する必要があるかについて満足していません.jQM cssを失うことなく、さまざまな要素のテキストを変更するより良い方法はありますか?

これは、それほど複雑であってはならないことだとは思いません。おそらく、私が Web 開発に慣れていないためかもしれませんが、このような問題に常に遭遇しています。使用する良いリファレンスを知っている人はいますか? -「推測」しようとするのはとても面倒で、「ラジオボタンのラベルにjqm動的にテキストを設定」を検索しているときに、Googleで答えを見つけるのは難しいです

var domElement = $j('#' + request.id);

//check if it exists
if (domElement) {
    if (domElement.length === 1) {

        switch(domElement.get(0).tagName.toLowerCase()) {
            case 'label':
                //it could be part of a radio button
                if (domElement.get(0).className.toLowerCase().indexOf("ui-radio") > 0){
                    domElement.find('.ui-btn-text').text(request.val);
                }
                else{
                    domElement.text(request.val);
                }
                break;
            case 'p':
            case 'span':
            case 'textarea':
            case 'li':
            case 'h3':
                domElement.text(request.val);
                break;
            case 'input':
                domElement.val(request.val);
                break;
            case 'a':
                var datarole = domElement.data('role');
                switch(datarole) {
                    case 'button':
                        domElement.find('.ui-btn-text').text(request.val);
                        break;
                }

                break;
        }
    }

}
4

2 に答える 2

1

pagebeforecreateイベントを使用して、JQMページを初期化する前にテキストの変更を適用することをお勧めします。

この時点ではDOMは変更されていないため、jQueryで通常行うように要素を選択できます。これは、JQMが作成する基礎となるマークアップ（将来のバージョンで変更される可能性があります）を知る/ハードコーディングすることに依存しないため、推奨される方法です。

ページにJQMスクリプトを含める前に、必ずコードを配置してください。これにより、コードが最初に実行されるようになります。

$(function() {

    $(document).bind("pagebeforecreate", beforePageCreate);

    function beforePageCreate(event, ui) {
        $('a').text('Text modified before page creation.');
        $('input').val('Value modified before page creation.');
        $('label').text('Text modified before page creation.');        
    };

});

pagebeforecreateイベントの完全な例を次に示します。http： //jsfiddle.net/VCYLs/2/

于 2012-07-03T20:51:42.657 に答える
0

Does something like this work for you?

JS

$('#changeLabels').on('click', function() {
    $('.radioGroup').each(function() {
        var radio  = $(this);
        $("label[for='"+radio.attr('id')+"']").find('span.ui-btn-text').text('New Label for '+radio.attr('id'));
        console.log('New Label for '+radio.attr('id'));
    });
});

HTML

<div data-role="page" class="type-home">
    <div data-role="content">

        <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
             <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" class="radioGroup"/>
             <label for="radio-choice-1">Cat</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" class="radioGroup"/>
             <label for="radio-choice-2">Dog</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" class="radioGroup"/>
             <label for="radio-choice-3">Hamster</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" class="radioGroup"/>
             <label for="radio-choice-4">Lizard</label>
        </fieldset>
        <br />
        <a href="#" data-role="button" id="changeLabels">Change Radio Labels</a>
    </div>
</div>​
于 2012-07-03T21:01:06.850 に答える