我試圖讓它閃爍，但它不會工作

我試圖在我公司的ERP中創建通知系統，類似於Facebook。現在，工作幾個小時後，它看起來像這樣：我試圖讓它閃爍，但它不會工作

example

每個菜單項是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類，它的工作原理。我很肯定它肯定是一些錯字或愚蠢的錯誤，但我找不到它。

請幫忙！

來源

2013-03-26 ex3v

好的，問題解決了。

的事情是，這個功能

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-26 09:25:48 ex3v

不要認爲這是它，它不是一個「即時功能」，你只能稱它一次。這裏是另一個帶有console.log（'started'）的小提琴，以顯示它只被調用一次http://jsfiddle.net/w9SDH/。很高興你把它分類。 – Ben 2013-03-26 09:34:09

不要忘記接受你的答案（如果可以的話）以備將來參考。 – zik 2013-03-26 11:24:29

本 - 這是真的。事實上，這個問題在其他地方說謊。更進一步，在我的'notificationObject（）'函數中，我做了一些與'construct'類似的東西 - 只是一組在啓動時執行的函數。其中一個是檢查通知計數是否大於0，然後更改頁面標題並執行閃爍。這是我愚蠢的錯誤，但說實話，無論如何，你們幫我找到了它。謝謝！ – ex3v 2013-03-26 13:56:15

嘗試使用toggleClass函數，而不是檢查類自己喜歡：

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

jQuery的參考：http://api.jquery.com/toggleClass/

來源

2013-03-26 09:11:42 hyde

嗨！在我遇到'if' -'else'之前，我試過了。不幸的是，它沒有給我任何東西 – ex3v 2013-03-26 09:14:15

我把所有的代碼放到一個小提琴here和它的工作。不確定是什麼問題。

加入CSS

.restricted{ 
    visibility:hidden; 
}

另外除去(more 'class' functions)線。但我認爲你只是將其添加到帖子中，它不是你的代碼的一部分。

來源

2013-03-26 09:13:38 Ben

問題是'restricted'是'background-color：red'，但是，當然這並不重要。我剛剛在firebug的html輸出上演了一段時間，我看到，在我的例子中，'restricted'類永遠不會被JavaScript添加到代碼中。 – ex3v 2013-03-26 09:18:59

對不起，我沒有關注，你有沒有修復它？我已經改變爲背景顏色的CSS，它似乎仍然工作 - http://jsfiddle.net/aXS2Z/ – Ben 2013-03-26 09:23:48

本，我在下面添加了新的答案和解決方案。還是要謝謝你的幫助！ :) – ex3v 2013-03-26 09:26:57

添加和刪除的只是代替了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-26 09:28:48 roel

我試圖讓它閃爍，但它不會工作

回答

相關問題