jquery-mobile - 即时刷新单选按钮上的 jQueryMobile 样式

Question

我正在尝试重新设计一组垂直单选按钮的样式，我添加到其中一个的新主题出现了，但我从另一个/其余主题中删除的主题并没有消失。
我的目标是更改所选单选按钮(相关控件，无论如何)的主题，使其在被选中时更加突出。

<div data-role="content">

    ...
    
    <fieldset data-role="controlgroup" id="showChooser">
        <legend><h3>Which show are you attending?</h3></legend>

        <input type="radio" name="activeShow" id="activeShow1" value="1" />
        <label for="activeShow1">
            <h2>Choice 1</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        <input type="radio" name="activeShow" id="activeShow2" value="2" />
        <label for="activeShow2">
            <h2>Choice 2</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        <input type="radio" name="activeShow" id="activeShow3" value="3" />
        <label for="activeShow3">
            <h2>Choice 3</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        ...

    </fieldset>

    ...
    
</div>

这将导致显示以下列表:

(来源: skitch.com)
因此，单击其中之一，我正在运行此代码:

$('#showChooser input:radio').click(function(e) {
    $("#showChooser label").attr('data-theme','c');
    $(this).next().attr('data-theme','e');
    $("#settings").page();
});

理论上，第一行应该将它们全部重置为主题“C”的基本状态，然后第二行将突出显示所选项目。我可以逐步查看这些 HTML 更改是否已完成，因此很明显接下来需要让 jQuery Mobile 重新解析和更新显示。
请注意使用 .page() 刷新整个页面的绝望尝试。最后——即使那样也没有达到预期的效果。
第一次单击时，它具有所需的效果:

但随后的点击似乎不会取消突出显示任何先前选择的行:

我也试过 $("#showChooser").listview("refresh")以及其他一些我不记得的类似事情，但都没有达到预期的效果。那么我错过了什么/做错了什么？

Answer 1

我有同样的问题。

$('#showChooser input:radio').click(function(e) {
    $("#showChooser label").attr('data-theme','c').removeClass('ui-btn-up-e');
    $(this).next().attr('data-theme','e').addClass('ui-btn-up-e');
});

见 this jQuery forum post .