[英]jQuery each function to show a different pop up on each click
嗨,我正在尝试使每个框显示一个单独的框,但我不知道如何使每个循环正确运行...此代码同时显示了每个框,而不是各个框。 ..谢谢你的帮助。
<style type="text/css">
.div_ActionsList {
border:1px solid #ccc;
min-width:100px;
max-width:200px;
position:relative;
top:5px;
}
.div_actionsClick {
cursor:pointer;
font-size:14px;
}
.div_ActionsList ul {
line-height:18px;
}
.div_ActionsList ul li{
line-height:18px;
font-size:14px;
padding:3px 8px;
}
.div_ActionsList ul li:hover {
background:#0CF;
cursor:pointer;
color:#fff;
}
</style>
<script type="text/javascript">
$(function() {
$('.div_ActionsList').hide();
$('.div_actionsClick').each(function(){
$(this).click(function(){
$('.div_ActionsList').toggle();
});
});
});
</script>
<div class="div_Actions">
<div class="div_actionsClick">Actions</div>
<div class="clearBoth"></div>
<div class="div_ActionsList">
<br/>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<br/>
</div>
<br/><br/>
<div class="div_actionsClick">Actions</div>
<div class="clearBoth"></div>
<div class="div_ActionsList">
<br/>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<br/>
</div>
<br/><br/>
</div>
将每个Click
/ List
对包装到另一个div中,然后尝试进行此修改(请注意,不需要每个对,jQuery仍将绑定到所有匹配的元素):
$('.div_actionsClick').each(function(){
$(this).click(function(){
$('.div_ActionsList').toggle();
});
});
应该:
$('.div_actionsClick').click(function(){
$(this).parent().find('.div_ActionsList').toggle();
});
基本上,您遇到的错误是因为$('.divActionsList')
正在查看整个页面,并用该类切换所有div(全部都是)。 通过将div与Click
和List
分组,可以使jQuery通过检查clicked按钮附近的DOM轻松找到相应的列表。
基本上,上面所做的只是找到被单击元素的父元素,然后在其中而不是整个页面中查找所有.div_ActionsList
。
有几个问题。 首先,您可以通过以下操作将click绑定到div:
$('.classname').click(function(){
//function
});
然后,您可以通过执行以下操作来进行切换...。
$(this).parent().find('.div_ActionsList').toggle();
因此,您的最终代码将是:
$('.div_actionsClick').click(function(){
$(this).parent().find('.div_ActionsList').toggle();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.