1

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

例子

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

  • selected是蓝色的，显示在图片上
  • 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类时，它可以工作。我很确定它一定是一些错字或愚蠢的错误，但我找不到它。

请帮忙！

4

4 回答 4

2

尝试使用 toggleClass 函数而不是自己检查类，例如：

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

jQuery 参考：http ://api.jquery.com/toggleClass/

于 2013-03-26T09:11:42.260 回答
1

好的，问题解决了。

问题是这个功能

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);
  }

开始执行声明。

所以当我打电话时

$(document).ready(function(){

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

});

我没有一个，而是两个间隔同时工作。

于 2013-03-26T09:25:48.547 回答
1

我把你所有的代码都放到了这里的 Fiddle中，它工作了。不确定是什么问题。

添加了CSS

.restricted{
    visibility:hidden;
}

也去掉了(more 'class' functions)线。但是我假设您只是将其添加到帖子中，并且它不是您代码的一部分。

于 2013-03-26T09:13:38.743 回答
0

添加和删​​除 2 个类，而不是仅受限制

if(nl.liElement.hasClass('restricted') == false){
                                           nl.liElement.addClass('restricted');
                                           nl.liElement.removeClass('selected');
                                        }
                                          else {
                                           nl.liElement.removeClass('restricted');
                                           nl.liElement.addClass('selected');
                                          }
于 2013-03-26T09:28:48.643 回答