1

Facebookと同様に、会社のERPで通知システムを作成しようとしています。今のところ、数時間の作業の後、次のようになります。

例

各メニュー項目はli要素です。各要素は、その背景色を変更するクラスの1つを持つことができます。

  • 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

ここですべてのコードをフィドルに入れましたが、機能しました。問題が何であるかわからない。

cssを追加しました

.restricted{
    visibility:hidden;
}

また、行を削除しまし(more 'class' functions)た。しかし、あなたはそれを投稿に追加したばかりであり、それはあなたのコードの一部ではないと思います。

于 2013-03-26T09:13:38.743 に答える
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();

});

私には1つではなく、2つのインターバルが同時に機能していました。

于 2013-03-26T09:25:48.547 に答える
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 に答える