[英]Jquery multi DIVs hide/show
i want to show hide multiple divs with jquery or javascript. 我想用jquery或javascript显示隐藏多个div。 I seached the web but i find codes that must have unique divs like:
我在网上找到了,但是我发现必须具有唯一div的代码,例如:
<div id="div1">text</div>
<div id="div2">text</div>
and so on, but i want to add the divs in a foreache php function so i can't have multiple IDs, the foreache is a div wrapper. 依此类推,但我想将divs添加到一个foreache php函数中,所以我不能有多个ID,该foreache是一个div包装器。 So, my question is how can i do that ?
所以,我的问题是我该怎么做?
EDIT Because i am complete noob at JQuery i don't know how to implement anything, so i have this 编辑因为我在JQuery上是个菜鸟,所以我什么都不知道,所以我有这个
<div id="wrapper">
<div class="title">
<div class="hide"> Hidden Text</div>
</div>
</div>
When i click the title div, i want the class="hide" to be shown. 当我单击标题div时,我希望显示class =“ hide”。
Solution: 解:
.box
{ margin:10px;
height:auto;
}
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(this).next().slideToggle(500);
});
});
</script>
<div class="box">
<h1>This is the div</h1>
<div class="flip">If u click </div>
<div class="panel"> This will show</div>
The problem was as i said the div were generated by the foreach function and this solved it, Thanks to all ! 问题是因为我说div是由foreach函数生成的,这就解决了它,谢谢大家! I have much to learn.
我有很多东西要学。
You can try 你可以试试
<div id="div1" class="toggle">text</div>
<div id="div2" class="toggle">text</div>
Then 然后
$('.toggle').toggle(); //Automatic Display or hide the matched elements.
there are two ways of doing it: 有两种方法:
The first method is like everyone else described, add the class attribute to select the divs: 第一种方法就像其他所有人所描述的一样,添加class属性以选择div:
<div class="hide">content</div>
and 和
$(".hide").hide();
The second method is to give the parent div an unique id: 第二种方法是给父div唯一的ID:
<div id="wrapper">
<div>content</div>
<div>content</div>
</div>
then select all it's children by tag name: 然后按标记名称选择所有子代:
$("#wrapper div").hide();
Add some class to select all dives to hide, 添加一些课程以选择要隐藏的所有潜水,
<div class="toHide" id="div1">text</div>
<div class="toHide" id="div2">text</div>
And then hide them all , 然后全部隐藏
$('div .toHide').hide();
Solution 1 解决方案1
<div id="div1">text</div>
<div id="div2">text</div>
jQuery('#div1, #div2').hide();
jQuery('#div1, #div2').show();
jQuery('#div1, #div2').toggle();
Solution 2 解决方案2
<div id="div1" class="some-div">text</div>
<div id="div2" class="some-div">text</div>
jQuery('.some-div').hide();
jQuery('.some-div').show();
jQuery('.some-div').toggle();
Another answer: 另一个答案:
Use the parent element: 使用父元素:
<div id="yourId">
<div id="div1">text</div>
<div id="div2">text</div>
</div>
$("#yourId div").hide();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.