javascript - 更改 jQuery Mobile 中翻转切换开关中的选项文本

Question

我在 jQuery Mobile 中有一个切换开关组件 ( jsfiddle here )

<select name="toggle" id="toggle" data-role="slider">
    <option id="value1" value="off">value1</option>
    <option id="value2" value="on">value2</option>
</select> 

我希望能够在任何给定时刻以编程方式更改显示的文本。

例如“value1”应变为“newvalue1”，“value2”应变为“newvalue2”。

此函数应该使用新值重新创建切换开关，但实际上它什么也不做:

function yourfunction() { 
    //alert ("Changing stuff");
    $('#value1').html ('newvalue1');
    $('#value2').html ('newvalue2');
    var myswitch = $("#toggle");
    myswitch.slider("refresh", true);
}
window.setInterval(yourfunction, 3000);​

Answer 1

这对你有用吗？

• http://jsfiddle.net/aD5xD/13/

JS

function yourfunction() { 
        //alert ("Changing stuff");
        $('.ui-slider-label-a').text('newvalue1');
        $('.ui-slider-label-b').text('newvalue2');
        var myswitch = $("#toggle");
        myswitch.slider("refresh", true);

    }
window.setInterval(yourfunction, 3000);​

jQM 为两个选项添加一个类( ui-slider-label-a 和 ui-slider-label-b )，通过使用这些类，您可以访问更正元素并更改文本。

注意:查看 jQM 添加的附加标记的最佳方法是使用 Google Chrome(恕我直言)并检查元素