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

这样的事情对你有用吗？

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 回答