Question

我想在我的网站上发生事件时创建通知。通知将被添加到元素中，并显示通知窗口。然后我希望能够控制这个元素，从某种意义上说，我希望能够用它做更多的动作。

    $('#footer_notification').prepend('<li>something happened</li>',
       function(){$(this).delay('3000').fadeOut();}
    )

即。发生此事件时，通知将显示为<li>元素中的<ul>元素。然后3秒钟后元素会淡出。

上面的代码不起作用，因为似乎没有用于前置的回调功能。那么如何控制这个新的前置元素，请记住可以同时添加多个元素？

Answer 1

我想这可能会对你有所帮助：

let $li = $('<li>').text('something happened');
$('#footer_notification').prepend($li);
setTimeout(()=>{
  $li.fadeOut();
}, 3000);

只需创建您想要添加的标记元素并使用var（即$ li）对其进行引用，之后，您可以随意执行任何操作。

修改

回答你的另一个问题，首先，fadeOut方法DOESN＆＃39; T删除项目，它只是隐藏它（将css显示道具添加到无）。所以，如果你想要检查这个，你需要得到footer_notification的孩子并检查带有display：block的元素，这意味着它有活动通知，如果没有，那就意味着没有有效通知，例如：

＆＃13;

$(()=>{
  let $foo = $('#footer_notification');
  let $liNo = $('<li>').text('no notifications');
  $foo.append($liNo);
  $('#add').on('click',()=>{
    $liNo.remove();
    let $li = $('<li>').text('something happened');
    $foo.prepend($li);
    setTimeout(()=>{
      $li.fadeOut({
        done: ()=>{
          if($foo.children().css('display')=='none'){
            $foo.append($liNo);
          }
        }
      });
    }, 3000);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="footer_notification">
</ul>


<button id="add" type="button">+ Notification</button>

＆＃13;

注意我在fadeOut中使用done选项，这会在动画结束后触发给定的函数，这是您应该在通知隐藏后放置要执行的代码的位置。希望我能帮忙

如何在jQuery中为前置元素创建事件

1 个答案: