好吧,我在一个以上隐藏的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>» 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。为什么会这样?怎么能 我解决了这个问题?
答案 0 :(得分:0)
如果你想最初隐藏一些元素然后根据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