Question

我在jquery mobile中有一个弹出列表，你可以点击两个项目进行选择。我无法通过jquery移动到＃34;记住＆＃34; - 通过class='ui-btn-active' - 选择了哪个列表视图项。您单击列表项，但ui-btn-active类没有附加到它。

这是我使用的jquery（它不起作用）：

$('a.switchview').on('click', function () {
    $(this).addClass('ui-btn-active ui-state-persist');
});

以下是HTML：

<div data-role='page' data-add-back-btn='true'>
    <a href='#popupSwitchView' class='ui-state-persist ui-btn ui-shadow ui-corner-all ui-icon-eye ui-btn-icon-notext ui-alt-icon  ui-nodisc-icon ui-btn-inline' data-transition='slideup' data-rel='popup' data-inline='true'>Switch view</a>

    <div data-history='false' data-role='popup' id='popupSwitchView'>
<a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' class='ui-btn-right' data-theme='a'>Close</a>

        <ul data-role='listview' data-icon='delete'>
            <li data-role='list-divider' style='font-style: oblique;'>Select choice</li>
            <li><a href='javascript:;' data-role='button' data-transition='fade' data-mini='true' class=' switchview' id='choiceA' name='theView' value='choiceA'>Choice A</a>

            </li>
            <li><a href='javascript:;' data-role='button' data-transition='fade' data-mini='true' class='switchview' id='choiceB' name='theView' value='choiceB'>Choice B</a>

            </li>
        </ul>
    </div>
</div>

PortalDelegateServlet

为什么这不起作用的任何想法？

Answer 1

从click事件返回false并从之前的选择中删除活动类：

$('a.switchview').on('click', function () {
    $('a.switchview').removeClass('ui-btn-active ui-state-persist');
    $(this).addClass('ui-btn-active ui-state-persist');
    return false;
});

更新了 FIDDLE

jquery mobile - 使ui-btn-active应用于活动列表项

1 个答案: