Question

好吧，我在一个以上隐藏的div上调用.show()时遇到问题。我已经完成了我的逻辑，但我找不到为什么这样做 -

每个实验室div看起来都像这样但是有不同的类 -

<div class="lab1">
    <!--CTedit -->
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><i class="fa fa-plus-square-o"></i><span style="margin-left: 12px; display: inline-block;"></span>Lab Focus: Cloud Management with vRealize Operations & <nobr>vRealize Automation</nobr></a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <span style="font-family:'proximanova-light', sans-serif;font-size:15px; line-height:19px; text-align:left; color: #565656;">
                    <p>Deliver intelligent operations management across physical, virtual, and cloud infrastructures and accelerate the deployment and management of applications and compute services, improving business agility and operational efficiency.</p>
                    <p>
                        <ul>
                            <li>Build dashboards, views, and reports in vRealize Operations Manager</li>
                            <li>Discover OS  and application management with vRealize Operations Manager</li>
                            <li>Learn how vRealize Log Insight delivers real-time log management, with machine learning-based Intelligent Grouping, high performance search and better troubleshooting across physical, virtual, and cloud environments</li>
                            <li>Walk through the deployment of a multi-tier infrastructure workload with integrations into several different existing technologies using vRealize Automation</li>
                            <li>Customize workloads with vRealize Automation as they progress through the provisioning or de-provisioning process</li>
                        </ul>
                    </p>
                </span>
            </div>
        </div>
        <br>
        <p>
            <a class="l1Link" style="color:#6db33f;" href="http://vmware-events.eventbrite.com" target="_blank">
                <span style="text-align:center"><strong>&raquo; Register now</strong></span>
            </a>
        </p>
        <p class="descP1" style="font-size:12px;"><strong>DAY DATE <br>VENUE <br> CITY STATE</strong> </p>
    </div>   <!--CTedit -->
</div>

我最初隐藏了一系列8个div，如果选择了某个下拉选项，我会在一个函数中显示所有这些div：

//setup
$(".lab1").hide();
$(".lab2").hide();
$(".lab3").hide();
$(".lab4").hide();
$(".lab5").hide();
$(".lab6").hide();
$(".lab7").hide();
$(".lab8").hide();

function init() {
    $(".lab1").show();
    $(".lab2").show();
    $(".lab3").show();
    $(".lab4").show();
    $(".lab5").show();
    $(".lab6").show();
    $(".lab7").show();
    $(".lab8").show();
});

所以他们开始隐藏。当下拉表单更改时，我调用以下内容，它会找到几个匹配的结果（例如，1个选项可能会触发这些实验室div中的3个），并且应该显示所有这些结果：

 //dropdown change
$(".form-control").change(function () {
    $(".lab1").hide();
    $(".lab2").hide();
    $(".lab3").hide();
    $(".lab4").hide();
    $(".lab5").hide();
    $(".lab6").hide();
    $(".lab7").hide();
    $(".lab8").hide();

    console.log(this.value);
    //find all matching events and get nums
    if (this.value == "All labs") {
        init();
    }
    else {
        for (var i = 0; i < arrayOfEvents.length; i++) {
            if (arrayOfEvents[i][0] == this.value) {
                var chosen = arrayOfEvents[i][3];
                var newLink = arrayOfEvents[i][8];
                console.log("match!", chosen);

                var selectedLab = labArr[chosen - 1];
                displayLab(selectedLab, newLink);
                updateTxt(selectedLab, i);
            }
        }
    }
});

displayLab显示相应的lab div，我知道这是有效的，因为多个匹配打印到控制台（这里有2个匹配） -

但是我的问题只有1个对应的div，第一个显示。所有其他人都隐藏着。如果我没有在表单更改功能中调用所有这些的初始隐藏，则显示/扩展多个实验室没有问题。

因为我在显示正确的displayLab之前隐藏了所有的实验室div，我不知道为什么它不会取消隐藏所有的div。为什么会这样？怎么能我解决了这个问题？

Answer 1

如果你想最初隐藏一些元素然后根据jQuery的事件显示它们，那么通过内联css隐藏它们这是最好不要在应用程序启动时以编程方式进行。

{"accounting": true, "accel": 264318}

在触发事件时显示它们：

.f1 .container .row {
   padding-top:42px;
   position:relative; 
}

一次显示页面中所有隐藏的div：

<div class="div1" style="display: none;"></div>
<div class="div2" style="display: none;"></div>
<div class="divN" style="display: none;"></div>

尝试使用此功能显示同一$('select').on('change', function() { $('.div1, .div2, .divN').show(); });类的所有元素：

// You can use this selector as a nested one 
// so all the hidden elements inside a 
// specific parent element will be selected.
$('div:hidden').show();

组选择器可以选择不同的类：

your-divs

Jquery - 多个div不会显示（）？

1 个答案: