-1

クラス「ui-btn-active」を 1 つのアンカー タグから削除して、別のアンカー タグに追加できるようにしたいと考えています。これは navbar ボタン (jQuery Mobile) をクリックすることで自動的に行われますが、クラスの変更をトリガーしない Month から Day へのショートカットがあります。DOM をループして文字列マッチング (または正規表現) を使用することなく、これをエレガントに行うにはどうすればよいですか?

<header id="view-navigation-view" class="button-list">
<div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
    <ul class="ui-grid-a">
        <li class="ui-block-a">
            <a href="#" class="ui-btn-active ui-btn ui-btn-up-c ui-btn-inline" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true">
                <span class="ui-btn-inner"><span class="ui-btn-text"><span>Day</span></span></span>
            </a>
        </li>
        <li class="ui-block-b">
            <a href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline">
                <span class="ui-btn-inner"><span class="ui-btn-text"><span>Month</span></span></span>
            </a>
        </li>
    </ul>
</div>
</header>

これで削除されますが、他に追加するにはどうすればよいですか?

$('a.ui-btn-active').removeClass('ui-btn-active')

編集

各アンカー タグには、スパンの innerText と同じ ID を付けました。

    var setActiveNavbarButton = function(buttonName) {
        $('a.ui-btn-active').removeClass('ui-btn-active');
        $('#' + buttonName).addClass('ui-btn-active');
    };
4

2 に答える 2

2

<a..>簡単にアクセスできるように、2 つのタグに異なる ID を追加することをお勧めします。

<header id="view-navigation-view" class="button-list">
<div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
 <ul class="ui-grid-a">
    <li class="ui-block-a">
        <a id="link_1" href="#" class="ui-btn-active ui-btn ui-btn-up-c ui-btn-inline" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true">
            <span class="ui-btn-inner"><span class="ui-btn-text"><span>Day</span>    </span></span>
        </a>
    </li>
    <li class="ui-block-b">
        <a id="link_2" href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline">
            <span class="ui-btn-inner"><span class="ui-btn-text"><span>Month</span></span></span>
        </a>
    </li>
  </ul>
 </div>
</header>

$("#link_1").removeClass("ui-btn-active");

$("#link_2").addClass("ui-btn-active");

于 2013-06-14T08:09:41.350 に答える