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（），它会自动识别它所依赖的手风琴和标签取决于它被调用的位置。

如果你想做实验，这里有一个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生成的类获取所有错误及其父级手风琴内容和标题以及标签面板和标题页。

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

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

使用基于jQuery DOM的方法识别手风琴选择器和选项卡？

1 个答案: