Question

我有同一个类的多个div作为通知框，每个div一个接一个地淡入淡出，一个接一个地使用jQuery。我还有一个名为'close_box'的div作为关闭按钮，所以当用户点击它时，div将使用jQuery关闭/隐藏。我遇到的问题是，因为div具有相同的类，当用户单击“close_box”div时，这应该分别关闭每个div。相反，最新发生的是所有三个div都假设有一个关闭按钮显示'close_box'div，但只有第三个框显示这个，只有第三个框正在关闭，而其他两个框没有显示'close_box'div并且可以不要关闭。

有没有办法可以使用父母或类似的想法分别关闭每个div，有人可以告诉我我哪里出错了怎么办？谢谢

<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>

Answer 1

只需将这两项操作分开，然后移除appendTo(this)：

$('.noti_box').each(function(i) {
    $(this).hide().delay(i * 1500).fadeIn(1500);
});

$('.close_box').on('click', function() {
    $(this).closest('.noti_box').fadeOut();
});

^{您发布的内容只是my example from your previous question的错误解释。}

DEMO： http://jsfiddle.net/F39TV/4/

jquery：当用户点击div关闭时，分别隐藏同一个类的每个div？

1 个答案: