Question

如何在不丢失jQM样式的情况下更改dom元素的文本？ - 我可以调用.text（'sometext'）的大多数项目，但是我遇到某些元素的问题，例如带有按钮数据角色的链接和用于单选按钮的标签 - jQM样式搞砸了。

我在下面提出了一个函数，但是我对如何识别这些边缘情况感到不满意 - 有没有更好的方法来更改各种元素的文本而不会丢失它们的jQM css？

这不会让我觉得不应该是这么复杂的事情 - 也许是因为我是网络开发人员的新手，但我经常遇到这样的问题。有谁知道使用的好参考？ - 尝试“猜测”是一种痛苦，当您搜索“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;
        }
    }

}

Answer 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/

Answer 2

这样的事情对你有用吗？

http://jsfiddle.net/HZBfY/

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>

如何使用jQM动态更改DOM元素文本而不会丢失样式

2 个答案: