快速刷新单选按钮上的jQueryMobile样式 [英] Refreshing jQueryMobile styling on radio buttons on the fly

问题描述

我试图重新设置垂直方向的单选按钮的样式，但我添加到其中一个的新主题出现了，但是我从另一个主题/其余主题中删除的主题并没有消失.

I'm attempting to re-style a vertical group of radio buttons, and the new theme I add to one of them shows up but the theme I remove from another/the rest doesn't go away.

我的目标是更改所选单选按钮(无论如何相关控件)的主题，以使其在被选中时更加突出.

My goal is to change theme of the selected radio button (the related controls, anyway) to make it stand out more when selected.

<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 )}

_{(source: skitch.com)}

因此，单击其中之一，我正在运行以下代码:

So, on-click of one of them, I'm running this code:

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

理论上，第一行应将它们全部重置为主题"C"的基本状态，然后第二行应突出显示所选项目.我可以逐步了解这些HTML所做的更改，因此很明显接下来需要进行的操作是jQuery Mobile重新解析和更新显示.

The first line should, in theory, reset them all to the base-state of theme 'C', and then the second line would highlight the selected item. I can step through and see that these HTML changes are made, so it's obvious that what needs to happen next is for jQuery Mobile to re-parse and update the display.

请注意，在最后用.page()刷新整个页面的拼命尝试-即使没有达到预期的效果.

Note the desperate attempt at refreshing the whole page with .page() at the end -- even that doesn't achieve the desired effect.

第一次单击它具有预期的效果:

The first time you click one, it has the desired effect:

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

But subsequent clicks don't appear to un-highlight any previously selected rows:

我还尝试了$("#showChooser").listview("refresh")和其他一些我不记得的类似方法，但是没有一种方法具有预期的效果.那我想念/做错了什么?

I've also tried $("#showChooser").listview("refresh") and a few other similar things that I can't recall, but none have the desired effect. So what am I missing/doing wrong?

推荐答案

我遇到了完全相同的问题.

I had the exact same problem.

$('#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');
});

请参见此jQuery论坛帖子.

这篇关于快速刷新单选按钮上的jQueryMobile样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！