从调用的 AJAX 页面中使用 jQuery 隐藏 div（高级？）

Question

1：我有一个显示四个 Google 饼图的页面。我有可点击的标签来显示它们中的每一个。

2：但是，我始终使用 jQuery 隐藏/显示隐藏其中 4 个中的 3 个，但在页面加载时，它们都是可见的，直到我单击其中一个选项卡。见下图。

2.1：选中的标签用红色下划线标记。如您所见，我有四个选项卡，每个选项卡用于匹配图表。

3：当在图片顶部的框中选择了一个日期时，使用下面的代码，使用 AJAX 发布表单。

3.1：

        <form method="post" action="~/AJAXcalls/repinintAJAX.cshtml" name="form">
            <div class="reportDateDiv">

                <a class="blackColor fSize18 RPtxt">Reporting Period</a>

                <input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
                      onchange="mySubmit(this.form)" value="@inputDate" autocomplete="off" placeholder="@placeholderStartDate.ToString("MMM d, yyyy")" readonly="readonly" />

                <a class="blackColor fSize16 RPtxtTo">to</a>

                <input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
                      onchange="mySubmit(this.form)" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString("MMM d, yyyy")" readonly="readonly" />

                <select name="NormOrAvg" class="dwmViewSelect" onchange="mySubmit(this.form)">
                    <option selected=@(Request.Form["NormOrAvg"] == "1") value="1">Rep Per Set</option>
                    <option selected=@(Request.Form["NormOrAvg"] == "2") value="2">Average Rep Per Set</option>
                </select>
                </div>
        </form>

        <script type="text/javascript">
            function mySubmit(theForm) {
                $.ajax({ // create an AJAX call...
                    data: $(theForm).serialize(), // get the form data
                    type: $(theForm).attr('method'), // GET or POST
                    url: $(theForm).attr('action'), // the file to call
                    success: function (response) { // on success..
                        $('#here').html(response); // update the DIV
                    }

                });
            }
        </script>

4. 我想要的是包含图表的 4 个 div 中的 3 个在表单发布时从一开始就隐藏起来，这样它们就不会出现。目前它们都会显示，直到我单击其中一个选项卡，然后它们才会出现，只显示正确的选项卡。

5：我尝试使用 jQuery 来解决这个问题，以添加/删除 display: none; 的类，但这给了我下图所示的错误。

5.1：我认为出现此错误是因为我试图隐藏的这 4 个 div 位于发布时调用的 ajax 页面上。 此错误仅出现在我将 display none 类打开的 div 上，正如您在图片中看到的那样，选择了硬拉选项卡，因此如果我将类放在最后 3 个 div 上，则只有第一个有效。

6：这是我加载图表数据的 4 个 div。

<div id="piechart" class="repPieChart"></div>                
<div id="piechartS" class="repPieChart"></div>
<div id="piechartB" class="repPieChart"></div>
<div id="piechartD" class="repPieChart"></div>

有什么想法吗？

Answer 1

我会用 CSS over Javascript 来做这件事。

#here > div {
  display: none;
}
#here > div.piechart {
  display: block;
}

jQuery .show() 可以处理这些已经隐藏的divs。