Question

好的，我需要的可能听起来相当复杂，但在这里......

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

现在，抓住这个问题：

我怎样才能让“选择”逐步进行？

我的意思......

当用户首次点击导航栏时

检查是否选择了第一个div comp-id（具有类msp-selected）。如果没有，请选择它。
如果已选择第一个div，请更深层次查找comp-id，然后选择该值。

那么，有什么想法吗？

你会怎么做？

P.S。当点击导航项的<a>时，哪个特定项目会收到该事件？它是<div data-role=\"navbar\">还是导航栏项目？无论如何，从所有这些项目中，我想选择最外层 - 当前未被选中。下次，当用户再次点击时，例如选择导航栏，然后取消选择它并选择它的孩子（深入）。

编辑：

尝试时：

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

    });
});

点击导航栏项目时我得到的是：

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

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

Answer 1

您可以编写类似的函数（我不确定语法是否正确）

  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";
      }
  }

使用jQuery隔离特定的HTML元素

1 个答案: