基于两组选择器的显示-隐藏——如何让它们协同工作？

Question

该日历具有事件类型（使用复选框）和区域（带有热门图像的链接）的过滤器。我可以让任意一组过滤器独立工作，但是我到底如何让它们一起工作呢？使用单选按钮而不是图像会更好吗？还是有某种方法可以“记住”最后选择的图像？

此 jQuery 代码用于选择区域。我使用类似的方法来选择事件类型。我只是无法将它们捆绑到一个 jQuery 中，该 jQuery 可以协同工作以在选定区域中显示选定的事件类型！

用于选择一个区域的 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
    });
;

用户可以选择多个复选框，但一次只能选择一个区域（红色、蓝色、全部），因此我们正在查看 thisregion AND (thistype OR thattype)。如果用户更改区域，则仅应显示选定的事件类型。如果用户更改所选事件类型，则先前选择的区域仍应显示。下面的 jQuery 不起作用。

对于 jQuery 的这一部分：

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

我试图构建一个选择器，第一段的结果为 (red AND type1)，第二段的结果为 (red AND type2)，第三段的结果为 (blue AND type3)。我不知道该怎么做！

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 中没有看到任何段落。
• 选择器+=“#”+regionid+“.” + "check_" + $(this).attr("id") + ", "; 当这个选择器真正选择某些东西时，我看不到任何可能性。也许最好对 each 周期中的每个事件使用 show() 函数，而不是构造一些怪物选择器？

无法帮助您完成给定的代码。尝试正确重写它，我会尽力提供帮助。目前来看是不可能的。