0

我有如下所示的 HTML：

<fieldset class="vertical-tabs-pane">
   <div class="vertical-tab-navigation">
       <a class="previous-tab" title="Go back to previous step" href="#">Back</a>
       <a class="next-tab" title="Continue to next step" href="#">Next</a>
   </div>
</fieldset>

<fieldset class="vertical-tabs-pane">
   <div class="vertical-tab-navigation">
       <a class="previous-tab" title="Go back to previous step" href="#">Back</a>
       <a class="next-tab" title="Continue to next step" href="#">Next</a>
   </div>
</fieldset>

<fieldset class="vertical-tabs-pane">
   <div>
      <fieldset id="multistep-group_attendees" class="group-attendees">
          <div class="vertical-tab-navigation">
            <a class="previous-tab" title="Go back to previous step" href="#">Back</a>
            <a class="next-tab" title="Continue to next step" href="#">Next</a>
          </div>
      </fieldset>
   </div>   
</fieldset>

因此：3 个垂直选项卡窗格字段集，每个字段集底部都有一个导航 div。但是第三组导航比其他的嵌套更深两层。

像这样的jQuery：

$(".next-tab").click(function() {
    $(this).parents('fieldset.vertical-tabs-pane').hide().next('fieldset.vertical-tabs-pane').show();
    return false;
});

$(".previous-tab").click(function() {
    $(this).parents('fieldset.vertical-tabs-pane').hide().prev('fieldset.vertical-tabs-pane').show();
    return false;
});

这对于前两个字段集非常有效；单击“返回”和“下一步”会将您切换到下一个字段集。但它不适用于第三组，即使在我看来它仍然应该遍历树到适当的父字段集。

我需要改变什么？$("#multistep-group-attendees .next-tab") 如果这样更容易，我可以为第三个字段集提供特殊功能。

感谢您的帮助！

4

2 回答 2

1

下面的代码应该做到这一点

$(".next-tab").click(function() {
    var current = $(this).closest('fieldset.vertical-tabs-pane');
    var next = current.next('fieldset.vertical-tabs-pane');
    if (! next.length ) next = current.siblings(':first');
    current.hide();
    next.show();
    return false;
});

$(".previous-tab").click(function() {
    var current = $(this).closest('fieldset.vertical-tabs-pane');
    var prev= current.prev('fieldset.vertical-tabs-pane');
    if (! prev.length ) prev = current.siblings(':last');
    current.hide();
    prev.show();
    return false;
});

使用closest()和检查下一个/以前的存在似乎可以解决问题..

演示 http://jsfiddle.net/gaby/VbgDg/

于 2011-05-12T20:56:05.427 回答
1

问题可能不在于parents方法，而在于nextand prev。这些方法不会循环（尝试演示）。如果没有前一个元素，prev则不会选择最后一个元素，并且next工作方式相同。

于 2011-05-12T20:45:30.337 回答