使用基于jQuery DOM的方法识别折叠式选择器和选项卡？

Question

我有这个函数，我在其中发送jquery-ui-accordion和jquery-ui-tab的id。这个函数改变了它的错误状态。

我想让这个函数自动识别选择器和制表符，这样我就不需要向它发送任何参数了。

function show_error(selector,tab) {
    var $this = $(selector);
    //  parent tab
    var parent = $("#accordion").parent();
    //parent.adderror();

    // the content
    $this.adderror();

    // the header
    var header = $this.attr("aria-labelledby");
    $("#"+header).adderror();

    // the tab
    //This didn't work -var tab = parent.attr("aria-labelledby");
    $("#"+tab).parent().adderror();
}

要使用此函数调用，请将

<div id="tabs-1">
    <div id="accordion_oms">
        <div>
            <script>show_error("#ui-accordion-accordion_oms-panel-0","ui-id-1")</script>
        </div>
        <div>
            <script>show_error("#ui-accordion-accordion_oms-panel-1","ui-id-1")</script>
        </div>
    </div>
</div>

<div id="tabs-2">
    <div id="accordion_fulfillment">
        <div>
            No error here
        </div>
        <div>
            <script>show_error("#ui-accordion-accordion_fulfillment-panel-1","ui-id-1")</script>
        </div>

    </div>
</div>

问题是我在我的rails应用程序的很多地方使用了它，如果有什么东西被改变/移动了，我需要相应地改变它们。有没有办法让这个函数就像show_error()一样，然后它会自动拾取制表符和选择器？我将在正确的位置调用该函数。所以对于eg: show_error()，它会根据调用它的位置自动识别它用于哪个accordion和选项卡。

如果你想体验一下，这里有一个JSFiddle - http://jsfiddle.net/bxeP7/5/

它有点像

<h3>Orders</h3>

    <div>

      <% if @order_error.present? %>
          <%= @order_error.html_safe %>
          <%= javascript_tag("$(function() {show_error('#ui-accordion-accordion_oms-panel-0','ui-id-1');});") %>
      <% else %>
          <%= render "trace/display_tabular_data", :data => @order %>
      <% end %>
    </div>

<h3> Order Items </h3>
<div>
...
</div>

Answer 1

将生成代码更改为：

<h3>Orders</h3>
<div>
  <% if @order_error.present? %>
      <%= @order_error.html_safe %>
      <div class="error-occured"></div>
  <% else %>
      <%= render "trace/display_tabular_data", :data => @order %>
  <% end %>
</div>

<h3> Order Items </h3>
<div>
    ...
</div>

然后是您的JavaScript，使用jquery UI生成的类获取所有错误及其父accordion内容和标题以及选项卡面板和选项卡标题。

function show_error() {
    // Get all errors occured
    var $errorsOccured = $('.error-occured');

    $errorsOccured.each(function () {
        var $currentError = $(this);

        // Get accordion elements
        var $parentAccordionContent = $currentError.closest('.ui-accordion-content');
        var $parentAccordionHeader = $parentAccordionContent.prev('.ui-accordion-header');

        // Get tab elements
        var $parentTabPanel = $parentAccordionHeader.closest('.ui-tabs-panel');
        var tabIndex = $parentTabPanel.index();
        var $parentTabHeader = $parentTabPanel.prev('.ui-tabs-nav').find('li').eq(tabIndex);

        // Call error function for all elements found
        $currentError.add(
        $parentAccordionContent).add(
        $parentAccordionHeader).add(
        $parentTabPanel).add(
        $parentTabHeader).adderror();
    });
}

我没有测试它，花了很多精力来更新你的小提琴，但它会工作的！