0

OK、必要なものはかなり複雑に聞こえるかもしれませんが、ここにあります...

以下のHTML コードがあるとします (これは単なる例ですが、それでも非常に正確です)。

<div data-role="content" comp-id="jqm-content-6207" id="jqm-content-6207" class="" data-theme="" >

    <!-- New Navigation Bar #1 -->
    <div data-role="navbar" data-position="fixed" comp-id="jqm-navbar-4603" id="jqm-navbar-4603" class="" data-iconpos="top" >
        <ul>

        <!-- New Navigation Bar Item #1 -->
        <li>
            <a href="#" comp-id="jqm-navbar-item-6671" id="jqm-navbar-item-6671" class="" data-icon="home" data-theme="" >
                One
            </a>
        </li>
        <!-- / New Navigation Bar Item #1 -->

        <!-- New Navigation Bar Item #2 -->
        <li>
            <a href="#" comp-id="jqm-navbar-item-4404" id="jqm-navbar-item-4404" class="" data-icon="gear" data-theme="" >
                Two
            </a>
        </li>
        <!-- / New Navigation Bar Item #2 -->
        </ul>
    </div>
    <!-- / New Navigation Bar #1 -->

    <!-- New Navigation Bar #2 -->
    <div data-role="navbar" data-position="fixed" comp-id="jqm-navbar-4658" id="jqm-navbar-4658" class="" data-iconpos="top" >
        <ul>

        <!-- New Navigation Bar Item #2.1 -->
        <li>
            <a href="#" comp-id="jqm-navbar-item-5321" id="jqm-navbar-item-5321" class="" data-icon="home" data-theme="" >
                One
            </a>
        </li>
        <!-- / New Navigation Bar Item #2.1 -->

        <!-- New Navigation Bar Item #2.2 -->
        <li>
            <a href="#" comp-id="jqm-navbar-item-2843" id="jqm-navbar-item-2843" class="" data-icon="gear" data-theme="" >
                Two
            </a>
        </li>
        <!-- / New Navigation Bar Item #2.2 -->
        </ul>
    </div>
</div>

まず、核となるアイデアは次のとおりです。ユーザーが属性が設定されたアイテムをクリックすると、この特定の要素だけにcomp-idクラスが追加されmsp-selectedます (そして、他のすべての要素からクラスが削除されます)。

これは私がこの特定の部分を処理する方法です:

function removeAll()
{
    $("*").each(function() {
        if ($(this)!==undefined) {
            $(this).removeClass("msp-selected");
        }
    });
}

$(document).ready( function() {
    $('[comp-id]').bind('click', function(event) {
        removeAll();
        $(event.target).addClass('msp-selected');
    });
});

すでにお気づきかもしれませんが、これは HTML ドキュメントからアイテムを (クリックして) 「選択」する方法のようなものです。

さて、ここにキャッチがあります：

「選択」がプログレッシブになるようにするにはどうすればよいですか?

私が意味したのは...

ユーザーが最初にナビゲーション バーをクリックしたとき:

  • 最初のdivwithcomp-idが選択されている (クラスがmsp-selected) かどうかを確認します。そうでない場合は、それを選択します。
  • 最初のdivものがすでに選択されている場合は、さらに 1 レベル進んで を探しcomp-id、それを選択します。

それで、何かアイデアはありますか？

どのようにしますか？

PS<a>ナビゲーション項目をクリックすると、どの特定の項目がイベントを受け取りますか? それ<div data-role=\"navbar\">はナビゲーションバーのアイテムですか？とにかく、これらすべてのアイテムから、現在選択されていない最も外側のアイテムを選択したいと思います。次回、ユーザーがもう一度クリックして、たとえばナビゲーション バーが選択されている場合は、それを選択解除し、その子を選択します (さらに深くなります)。

編集 ：

しようとするとき： 

$(document).ready( function() {
    $('[comp-id]:not(.msp-selected)').on('click', function(e) {
        removeAll();
        $(this).addClass('msp-selected');

    });
});

navbar-item をクリックすると得られるものは次のとおりです。

Selected Div : jqm-navbar-item-8421
Selected Div : jqm-navbar-8598
Selected Div : jqm-content-2860
Selected Div : jqm-page-3363

したがって、基本的には最も外側のコンテナを「選択」するだけです。どちらが間違っていますか...次にユーザーがクリックすると、コンテンツが選択されます-次にnavbar、次にnavbar-item....

4

1 に答える 1

0

そのような関数を書くことができます（構文が正しいかどうかはわかりません）

  function onclick(sender)
  {
      if(type of sender == null )
      {
           return;
      }
      if(sender.className=="selected")
      {
           onclick(sender.childElement[0]); 

           // OR If you need all children to be selected,

           // for( var i =0; i<sender.childElement.count; i++)
           //    onclick(sender.childElement[i]); 


      }
      else
      {
           sender.className="selected";
      }
  }
于 2013-08-18T08:41:07.450 に答える