個々の通知を非表示にするjQuery

Question

私は数週間jQueryを学んできましたが、私が把握できない課題に遭遇しました。

私はクライアントの管理者コントロールパネルで作業しており、さまざまな理由で使用されているページの上部に表示される通知を実装しています。私も行うことができるようにしたいと思い何

$(document).ready(function() { 
    $('.click_hide').click(function() { 
    $('.click_hide').slideUp('slow', function() { 
    // Animation complete. 
    }); 
    }); 
}); 

<ul class="system_messages click_hide"> 
    <li class="blue"><span class="ico"></span><strong class="system_title">There have been 17 new cases since your last login.</strong></li> 
    <li class="blue"><span class="ico"></span><strong class="system_title">There have been 17 new cases since your last login.</strong></li> 
</ul> 

は個別に通知を非表示にすることが可能である（<li class="click_hide">...</li>を）とするとき：私はこれまで行うために管理している何

はそれを隠すためのdivクリッカブルを作るです<ul>...</ul>が消えることはありません。

感謝:)

Answer 1

1. バインドクリックされた特定の<li>を参照するためにクリックハンドラ内<li> sのクリックではなく、<ul>
2. 使用this。
3. <li>が非表示になると、おそらく.remove()になります。
4. 子供がいない場合は<ul>を非表示にします。

JS：

$(document).ready(function() { 
    $('ul.click_hide > li').click(function() { 
    var li = $(this).slideUp('slow', function() { 
     // Animation complete 
     var ul = $('ul.click_hide'); 

     // Remove li 
     li.remove(); 

     // Hide ul? 
     if (ul.children().length === 0) { 
     ul.slideUp('slow', function() { 
      // Remove ul 
      ul.remove(); 
     }); 
     } 
    }); 
    }); 
}); 

Answer 2

あなたはこれに似た何かを探していますか？ （恩赦構文エラー - カフオフビット）

$('.blue').click(function() { 
    //Hides the individual notification 
    $(this).hide(); 
    //Hides the ul if no additional notifications are present 
    if($('.system_messages').size() == 0) 
    { 
     $('.system_messages').hide(); 
    } 
}); 

Answer 3

はclick_hideクラスは、リストオブジェクトの上にある - ので、あなたのクリックハンドラは、実際にそれを参照しています。したがって、thisはliではなくulを参照します。

まず、.click_hide liを選択してliのクリックハンドラを設定します。その後、remove()を使用してDOMから要素を削除し、リストに含まれるリスト項目の数を確認します。

$('.click_hide li').click(function() { 
    var list = $("ul.system_messages"), 
     $this = $(this); 

    $this.slideUp('slow', function() { 
     $this.remove(); 
     if (!list.children().length) list.remove(); 
    }); 
}); 

それが働いて参照してください：私は数回オブジェクトと同じにjQueryを参照すると、これはそれを再作成する必要がなくなりますので、私は$this = $(this)を持ってhttp://jsfiddle.net/jonathon/tmL7m/

理由があります。 $listの場合も同じです（変数の先頭に$という接頭辞を付けるのは、jQueryオブジェクトであることを示すための規則です）。