javascript - 我试着让它闪烁，但它不起作用

Question

我正在尝试在我公司的 ERP 中创建通知系统，类似于 Facebook 的系统。现在，经过几个小时的工作，它看起来像这样:

每个菜单项都是一个 li 元素。每个元素都可以有一个类来修改它的背景颜色:

• 选中的是蓝色的，显示在图片上
• restricted 是红色的

现在，我想要实现的是让 li 背景在某些事件中闪烁(当有新消息进入且列表未打开时(以及 selected类不存在))。

问题是:它不会眨眼。 :(

这是我的 html 快照(不包括消息框)

<li class="notifications-topmenu-button selected">
  <a href="#">
    <div class="notifications-topmenu-button-wrapper">
      <div class="notifications-topmenu-button-icon">
        <img class="transparent" width="13" height="13" align="absmiddle" src="/images/icons/notifications.png" title="Powiadomienia" alt="Powiadomienia">
      </div>
      <div class="notifications-topmenu-button-counter" style="display: block;">3</div>
    </div>
  </a>
  <span class="divider"> : </span>
</li>
<li class="selected">
  <a href="/system_dev.php/users/profile">Strona główna</a>
  <span class="divider"> : </span>
</li>

此外，还有一些 JavaScript 启动对象(不要介意评论):

function notificationsObject(){
  var nl = new Object();

  //atrybuty klasy
  nl.liElement = $('.notifications-topmenu-button');
  nl.menuButton = $('.notifications-topmenu-button-wrapper');
  nl.menuButtonCounter = nl.menuButton.find('.notifications-topmenu-button-counter');
  nl.notificationsCount = jQuery.trim(nl.menuButtonCounter.text());
  nl.notificationsList = $('.notifications-list-wrapper');
  nl.blinkingInterval = null;

  nl.startBlinking = function(){
    nl.blinkingInterval = setInterval(function(){
                                        if(nl.liElement.hasClass('restricted') == false){
                                          console.debug(nl.liElement.addClass('restricted'));
                                        } 
                                          else {
                                            nl.liElement.removeClass('restricted');
                                          }
                                      }, 1000);
  }

  nl.stopBlinking = function(){
    if(nl.blinkingInterval != null) nl.blinkingInterval = null;
  }

  (more 'class' functions)

  return nl;
}

现在要测试它，我只需调用

$(document).ready(function(){

  var notifications = notificationsObject();
  notifications.startBlinking();

});

当然是在函数声明后调用了。

有趣的是，当我将 nl.startBlinking 函数 setInterval 内部结构更改为仅添加 restricted 类时，它起作用了。我很确定这一定是一些拼写错误或愚蠢的错误，但我找不到它。

请帮忙!

Answer 1

尝试使用 toggleClass 函数而不是像这样自己检查类:

setInterval(function(){
    nl.liElement.toggleClass('restricted');                                       
}, 1000);

jQuery 引用:http://api.jquery.com/toggleClass/