jQuery each function to show a different pop up on each click
Hi I am trying to get this to show up a separate box for each one and I can't figure out how to get the each loop to work right...this code is showing every one at the same time instead of individual boxes...thanks for any help.
<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>
Wrap each Click
/List
pair in another div, then try this modification (note that the each is unneeded, jQuery will bind to all matched elements anyway):
$('.div_actionsClick').each(function(){
$(this).click(function(){
$('.div_ActionsList').toggle();
});
});
Should be:
$('.div_actionsClick').click(function(){
$(this).parent().find('.div_ActionsList').toggle();
});
Basically the error you are having is because $('.divActionsList')
is looking over the entire page and toggling all the divs with the class (which is all of them). By grouping the Click
and List
with a div, you enable the jQuery to be able to easily find the corresponding list/s by inspecting the DOM nearby the clicked button.
Basically what the above does simply find the parent element of the one that was clicked, then look for all .div_ActionsList
inside that, rather than inside the entire page.
There are a couple of issues. First, you can bind click to a div by just doing:
$('.classname').click(function(){
//function
});
Then you could toggle by doing something like....
$(this).parent().find('.div_ActionsList').toggle();
So your final code would be:
$('.div_actionsClick').click(function(){
$(this).parent().find('.div_ActionsList').toggle();
});
精彩评论