Reputation: 45
I have multiple divs of the same class which act as notification boxes, and each one fades in one after the other, one by one using jQuery. I also have a div called 'close_box' which acts as a close button so when a user clicks this the div will close/hide using jQuery. The problem I am having is, because the divs have the same class, when a user clicks the 'close_box' div this should close each div separately. Instead whats happening is all three divs are suppose to have a close button showing 'close_box' div, but only the third box is showing this and only the third box is closing while the other two boxes are not showing the 'close_box' div and can't be closed.
Is there a way I can use parent or some similar idea to close each div separately and can someone please show me where I am going wrong and how to do this? thanks
<div class="noti_box"><div class="noti_text"><h4>You have 11 New Messages</h4></div><div class="close_box"></div></div>
<div class="noti_box"><div class="noti_text"><h4>You have 11 New Notifications</h4></div><div class="close_box"></div></div>
<div class="noti_box"><div class="noti_text"><h4>6 Matters Needing Your Attention</h4></div><div class="close_box"></div></div>
<script type="text/javascript">
$('.noti_box').each(function(i) {
$(this).hide().delay(i * 1500).fadeIn(1500);
$('.close_box').on('click', function() {
$(this).closest('.noti_box').fadeOut();
}).appendTo(this);
});
</script>
Upvotes: 0
Views: 669
Reputation: 145478
Just separate these two actions and remove appendTo(this)
:
$('.noti_box').each(function(i) {
$(this).hide().delay(i * 1500).fadeIn(1500);
});
$('.close_box').on('click', function() {
$(this).closest('.noti_box').fadeOut();
});
What you posted is just the wrong interpretation of my example from your previous question.
DEMO: http://jsfiddle.net/F39TV/4/
Upvotes: 4