0

我有这个功能，我在其中发送 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() 一样，然后它会自动拾取选项卡和选择器？我将在正确的位置调用该函数。因此对于例如： show_error() ，它会根据调用它的位置自动识别它用于哪个手风琴和标签。

如果你想实验，这里是一个 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>
4

1 回答 1

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 生成的类获取所有错误及其父手风琴内容和标题以及选项卡面板和选项卡标题。

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();
    });
}

我没有测试它，努力更新你的小提琴，但它会起作用！

于 2013-03-06T09:59:34.060 回答