セレクタの2つのセットに基づいて表示非表示 - 一緒に動作させる方法？

Question

このカレンダーには、イベントの種類（チェックボックスを使用）と地域（ホット画像を使用したリンク）のフィルタがあります。私はどちらかのフィルタを独立して動作させることができますが、どのようにして一緒に動作させることができますか？画像の代わりにラジオボタンを使用する方が良いでしょうか、あるいは最後に選択された画像を「思い出す」方法がありますか？

このjQueryコードは、リージョンを選択するために使用しました。イベントタイプを選択するのに似たようなものを使用しました。選択された地域で選択されたイベントタイプを表示するために一緒に働く1つのjQueryにバンドルされることはできません！

$(document).ready(function() { 
    // showall the events 
    $("#calendar p").show(); 

    $("td.filters a").click(function(evt) { 
     evt.preventDefault(); 
     var regionid = $(this).attr('id'); 
     $("#calendar p").hide(); //hide all 

    $("." + regionid).show(); //show only selected region 
    }); 
; 

ユーザーを一つの領域を選択するための

jQueryのは、一度に複数のチェックボックスが、1つの領域のみ（赤、青、すべて）を選択することができ、私たちはthisregion見ているAND（thistype ORそのタイプ）。ユーザーがリージョンを変更すると、選択したイベント・タイプのみが表示されます。ユーザーが選択したイベントタイプを変更すると、前に選択した領域が表示されます。以下のjQueryは動作しません。 jQueryのこの部分では

：

selector += "#" + regionid + "." + "check_" + $(this).attr("id") + ", "; 
// builds a selector like "red.type1, red.type2, blue.type3, " 

私は2番目のために（赤とTYPE1）最初の段落のために、（赤とTYPE2）で終わるセレクタを構築しようとしている、としています（青色とタイプ3）。私はそれをする方法がわかりません！

HTML

<div class="filters"> 
    <input type="checkbox" name="check_events" id="typeAny" /> 
    <input type="checkbox" name="check_events" id="type1" /> 
    <input type="checkbox" name="check_events" id="type2" /> 
    <input type="checkbox" name="check_events" id="type3" /> 
    <ul> 
     <li><a href="javascript:void(0)" id="all">All</a></li> 
     <li><a href="javascript:void(0)" id="red">Red</a></li> 
     <li><a href="javascript:void(0)" id="blue">Blue</a></li> 
    </ul> 
</div> 
<table id="calendar"> 
    <tr> 
     <td><p class="all red typeAny type1">Type 1 event in red region</p></td> 
     <td><<p class="all red typeAny type2">Type 2 event in red region</p></td> 
     <td><<p class="all blue typeAny type3">Type 3 event in blue region</p></td> 
    </tr> 
</table> 

CSS

.all a, #all a{display:block; background:gray;color:black; } 
.red a, #red a{display:block; background:red;color:black; } 
.blue a, #blue a{display:block; background:blue;color:black; } 

jQueryの

$(document).ready(function() { 
    var $checkboxes = $("input[id^='check_']"); 
    $("#calendar p").show(); 
    $("td.filters a").click(function(evt) { 
     evt.preventDefault(); 
     var regionid = $(this).attr("id"); 
     var selector = ""; 
     $checkboxes.filter(':checked').each(function(){ // checked   
      selector += "#" + regionid + "." + "check_" + $(this).attr("id") + ", "; 
      // builds a selector like "red.type1, red.type2, blue.type3, "  
     });  
     selector = selector.substring(0, selector.length - 2); // remove trailing ', '  
     $("#calendar p").hide() // hide all events  
      .filter(selector).show(); // reduce set to matched and show 
    }).change(); 
}); 

Answer 1

これは、コードではなく、ナンセンスのいくつかの種類：

• eventSelected - どこから来たのですか？ selector = selector.substring(0, selector.length - 2);を意味しますか？
• $（ "td.filters a"） - コードにテーブルやtrやtdが表示されない
• 空の場合hrefリンクの属性はありますか？私をからかってるの？ 'javascript：void（0）'または 'javascript :;'または '＃'！
• $(".calendar p").show(); - どういう意味ですか？ div.calendarに段落はありません。
• selector += "#" + regionid + "." + "check_" + $(this).attr("id") + ", ";このセレクタが実際に何かを選択する可能性はありません。たぶん、show()の機能を、各イベントのために、eachサイクルで使用する方がいいでしょうか？

特定のコードをお手伝いすることはできません。それを正しく書き直すと、私は助けようとします。現在不可能です。