javascript - jQuery each function to show a different pop up on each click -
hi trying show separate box each 1 , can't figure out how each loop work right...this code showing every 1 @ same time instead of individual boxes...thanks 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 div, try modification (note each unneeded, jquery bind 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 error having because $('.divactionslist')
looking on entire page , toggling divs class (which of them). grouping click
, list
div, enable jquery able find corresponding list/s inspecting dom nearby clicked button.
basically above find parent element of 1 clicked, .div_actionslist
inside that, rather inside entire page.
Comments
Post a Comment