Jquery 基于两组选择器显示隐藏--如何使它们一起工作？

此日历使用复选框和带有热图像的区域链接筛选事件类型。我可以让任意一组过滤器独立工作，但我该如何让它们一起工作呢？使用单选按钮而不是图像会更好吗？还是有什么方法可以记住上次选择的图像

这个jQuery代码用于选择区域。我使用了类似的方法来选择事件类型。我只是无法将它们捆绑到一个jQuery中，一起显示选定区域中的选定事件类型

jQuery用于选择一个区域

用户可以选择多个复选框，但一次只能选择一个区域（红色、蓝色），因此我们将查看此区域和此类型或此类型。如果用户更改区域，则仅显示选定的事件类型。如果用户更改了选定的事件类型，则以前选定的区域仍应显示。下面的jQuery不起作用

对于jQuery的这一部分：

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

我试图构建一个选择器，第一段以红色和type1结尾，第二段以红色和type2结尾，第三段以蓝色和type3结尾。我不知道该怎么做

HTML

jQuery

---

这不是代码，而是某种废话：

eventSelected-它来自哪里？你是说selector=selector.substring0，selector.length-2；？ $td.a-我在您的代码中没有看到任何表或tr或td 链接的href属性为空？你在开玩笑吧？使用“javascript:void0”或“javascript:；”或 $.calendar p.show；-这意味着什么？我在div.calendar中没有看到任何段落。 选择器+=+regionid+。+选中“+$this.attrid+”；我看不出这个选择器真的会选择什么。也许最好对每个周期中的每个事件使用show函数，而不是构造一些怪物选择器？

---

无法使用给定的代码帮助您。试着重写一下，我会尽力帮你的。目前这是不可能的。

我在回答评论中记下该问题的原因有一个较低的字符限制。我纠正了我试图抽象堆栈溢出情况时所犯的错误。我的坏消息。@coolEsh，你将如何为每个周期中的每个事件编写一个显示函数，什么是周期？很抱歉，我对jQuery知之甚少。@coolEsh，谢谢你指出这些不一致之处！现在也许我们能找到地方了这是解决办法。顺便说一句，为什么我的评论应该被否决？@coolEsh，其他人否决了你的答案，并将我的问题投票回零。今天晚些时候我会看看你的答案。

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

<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>

.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; }

$(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(); 
});