jQuery隠しDIVをチェックしてメッセージを表示する

Question

2つの選択ドロップダウンでの選択に基づいてDIVを表示/非表示にするコードがあります。これは素晴らしい作品です。今、私は何も選択肢に一致しないときに "結果なし"メッセージを表示しようとしています。

My Fiddle

それはほとんど働いています。問題は、「結果が表示されません」というメッセージが必要なときに表示されますが、必要なときには表示されないことです。どんな支援も大歓迎です。

Answer 1

なし結果のチェック後にelseステートメントを追加します。ここでは

 if ($('.item:visible').length === 0) { 
      $(".NoResults").html("<p>No events for your selection.</p>"); 
     } 
     else $(".NoResults").html(""); 

は、あなたの更新jsFiddleです：http://jsfiddle.net/hDWAh/8/

Answer 2

一つの方法は、http://jsfiddle.net/hDWAh/7/

、可視性を毎回切り替えることであろう

Answer 3

NoResultsクラスの内容を空にする条件がないようです。

if ($('.item:visible').length === 0) { 
    $(".NoResults").html("<p>No events for your selection.</p>"); 
} else { // NEW ELSE CLAUSE 
    $(".NoResults").empty(); 
} 

編集：私はあることをフィドルを編集し、これは動作しますが、私はむしろ、直接内容を設定するよりもショーを（）/非表示（）を使用して、以下のRepWhoringPeeHaaのソリューションを使用することをお勧めします。

このソリューションの主な議論は、htmlテンプレートの中に、そしてコードの中に、より多くのコンテンツ（「選択したイベントはありません」）を保持することです。コンテンツ/コードを分離する方が良いほど、将来的にコンテンツを簡単に更新できるようになります。コードBecouse

Answer 4

if ($('.item:visible').length === 0) 
    $(".NoResults").html("<p>No events for your selection.</p>"); 
else // <============== 
    $(".NoResults").empty(); // <============== 

Updated Fiddle

Answer 5

上から下へrunnedされ、ちょうどこのようにそれを示し、常にnoresultを隠し、それがあったしなければならないときで始まる：

http://jsfiddle.net/hDWAh/4/

Answer 6

if ($('.item:visible').length === 0) { 
    $(".NoResults").html("<p>No events for your selection.</p>"); 
} 
else{ 
$(".NoResults").html(""); 
} 

Answer 7

set the contents to nothing：

 if ($('.item:visible').length === 0) { 
      $(".NoResults").html("<p>No events for your selection.</p>"); 
     } else { 
      $(".NoResults").html(''); 
     } 

または単にNoResults要素にテキストを追加し、デフォルトでCSSを使用して非表示にします（display: none）。 And then toggle to display/hide。

 if ($('.item:visible').length === 0) { 
      $(".NoResults").show(); 
     } else { 
      $(".NoResults").hide(); 
     }