0

好的，我需要的可能听起来相当复杂，但它是...

假设我们有下面的 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 文档中“选择”项目（通过单击它们）的一种方式。

现在，这是问题所在：

我怎样才能使“选择”是渐进的？

我的意思是说...

当用户第一次点击导航栏时：

  • 检查是否选择了第一个divwith comp-id（有 class msp-selected）。如果没有，请选择它。
  • 如果第一个div已被选中，则更深入地寻找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

所以，基本上它只是“选择”最外面的容器。这是错误的......下次用户点击时，应该选择内容 - 然后是导航栏，然后是导航栏项目......

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 回答