Question

我正在制作产品详情页面，而且我非常接近达到我要寻找的最终结果。

我在这里创建了一个小提琴：http://jsfiddle.net/han902th/（还复制了我的代码）

（作为旁注，我只是试图找出javascript函数，其余的作为一个例子放在一起，以及可以使用的东西，所以代码可能不是最好的。）

基本上，左侧有品牌和产品类型的选项。

从列表中选择品牌或在我的示例中为证书颁发机构时，应将这些品牌视为OR选项。因此，选中brand1和brand2的复选框应显示两个品牌的产品（品牌1或品牌2）。

这部分与我所拥有的一切正常。但是，在选择产品类型时，或在我的示例中选择SSL证书类型时，应将这些视为AND选项。这就是我被困住的地方。

因此，在我的示例中，从列表中选择Comodo和Symantec的选项，列表更新以仅显示来自这些供应商的产品。但是，当您选择＆＃34; Code＆＃34;从证书类型选项中，列表显示来自Comodo和Symantec的所有产品，以及来自其他供应商的代码签名证书，当预期结果仅显示来自Comodo和Symantec的代码签名证书时。

以下是我的小提琴（http://jsfiddle.net/han902th/）

的内容

<html>
<head>
<title>Test</title>
<style type="text/css">

.main_price {
color: #000000;
font-family: "trebuchet MS";
font-size: 33px;
line-height: 35px;
padding-bottom: 10px;
text-align: center;
}

article {
background: none repeat scroll 0 0 #fff;
border: 1px solid #928b68;
box-sizing: border-box;
float: left;
margin-bottom: 2%;
margin-right: 2%;
padding-bottom: 0;
width: 300px;   
}

.home_more {
background: none repeat scroll 0 0 #19569d;
text-align: center; 
}

.home_more a {
    color: #fff;
    font-family: "trebuchet MS";
    font-size: 18px;
    line-height: 40px;
}

article .post_img {
    height: 70px;
    margin-bottom: 0;
    padding: 0 0 10px;
    text-align: center;
    width: 100%;
}


article h2.entry-title {
    color: #444444;
    font-size: 14px;
    font-weight: normal;
    height: 43px;
    line-height: 20px;
    margin: 5px 10px 10px;
    overflow: hidden;
}

article .post_img img {
    height: auto;
    margin-bottom: 0;
    width: auto;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<table style="width:100%;">
    <tr>
        <td width='200' valign="top">
                <div class="menu-item">
<table>
    <tr><td><b>Certificate Authority</b></td></tr>
<tr>
<td><label for="AlphaSSL">AlphaSSL</label></td>
<td><input id="AlphaSSL" type="checkbox" /></td>
</tr><tr>
<td><label for="Comodo">Comodo</label></td>
<td><input id="Comodo" type="checkbox" /></td>
</tr><tr>
<td><label for="GeoTrust">GeoTrust</label></td>
<td><input id="GeoTrust" type="checkbox" /></td>
</tr><tr>
<td><label for="GlobalSign">GlobalSign</label></td>
<td><input id="GlobalSign" type="checkbox" /></td>
</tr><tr>
<td><label for="RapidSSL">RapidSSL</label></td>
<td><input id="RapidSSL" type="checkbox" /></td>
</tr><tr>
<td><label for="Symantec">Symantec</label></td>
<td><input id="Symantec" type="checkbox" /></td>
</tr><tr>
<td><label for="Thawte">Thawte</label></td>
<td><input id="Thawte" type="checkbox" /></td>
</tr>
    <tr><td><b>Certificate Type</b></td></tr>
    <tr>
<td><label for="Standard">Standard</label></td>
<td><input id="Standard" type="checkbox" /></td>
</tr><tr>
<td><label for="SAN UCC">SAN UCC</label></td>
<td><input id="SAN UCC" type="checkbox" /></td>
</tr><tr>
<td><label for="OV">OV</label></td>
<td><input id="OV" type="checkbox" /></td>
</tr><tr>
<td><label for="Code">Code</label></td>
<td><input id="Code" type="checkbox" /></td>
</tr><tr>
<td><label for="Wildcard">Wildcard</label></td>
<td><input id="Wildcard" type="checkbox" /></td>
</tr><tr>
<td><label for="EV">EV</label></td>
<td><input id="EV" type="checkbox" /></td>
</tr>

</table>



                    </div>

                </td>     
        <td>

<article class="post AlphaSSL Standard">
    <header class="entry-header">
        <h2 class="entry-title">AlphaSSL Single Domain Certificate</h2>
        <div class="post_img"><img width="100" height="49" alt="AlphaSSL-Site-Seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/AlphaSSL-Site-Seal.jpg"></div>
    </header>
    <div class="main_price">$20</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post AlphaSSL Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">AlphaSSL Wildcard SSL Certificate</h2>
        <div class="post_img"><img width="100" height="49" alt="AlphaSSL-Site-Seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/AlphaSSL-Site-Seal.jpg"></div>
    </header>
    <div class="main_price">$70</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo Standard">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Positive SSL</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$10</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo Standard">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Essential SSL</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$40</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo SAN UCC">
    <header class="entry-header">
        <h2 class="entry-title">Comodo UCC / SAN / Multi-Domain SSL</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$60</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo OV">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Instant SSL Pro</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$60</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo Code">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Code Signing Certificate</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$99</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Positive SSL Wildcard</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$120</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo EV">
    <header class="entry-header">
        <h2 class="entry-title">Comodo EV SSL Single Domain</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$140</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Essential Wildcard SSL</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$150</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo OV Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Premium SSL Wildcard</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$400</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GeoTrust Standard">
    <header class="entry-header">
        <h2 class="entry-title">GeoTrust QuickSSL Premium</h2>
        <div class="post_img"><img width="115" height="55" alt="smarticon" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/smarticon.gif"></div>
    </header>
    <div class="main_price">$70</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GeoTrust OV">
    <header class="entry-header">
        <h2 class="entry-title">GeoTrust True BusinessID SSL</h2>
        <div class="post_img"><img width="109" height="53" alt="geotrust-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/geotrust-site-seal.png"></div>
    </header>
    <div class="main_price">$125</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GeoTrust EV">
    <header class="entry-header">
        <h2 class="entry-title">GeoTrust True BusinessID EV SSL – Single Domain</h2>
        <div class="post_img"><img width="109" height="53" alt="geotrust-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/geotrust-site-seal.png"></div>
    </header>
    <div class="main_price">$200</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GeoTrust OV Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">GeoTrust True BusinessID Wildcard SSL</h2>
        <div class="post_img"><img width="109" height="53" alt="geotrust-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/geotrust-site-seal.png"></div>
    </header>
    <div class="main_price">$450</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GlobalSign Standard">
    <header class="entry-header">
        <h2 class="entry-title">GlobalSign Domain SSL Certificate</h2>
        <div class="post_img"><img width="104" height="53" alt="globalsign-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/globalsign-site-seal.png"></div>
    </header>
    <div class="main_price">$125</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GlobalSign OV">
    <header class="entry-header">
        <h2 class="entry-title">GlobalSign SSL – Organization Validation</h2>
        <div class="post_img"><img width="104" height="53" alt="globalsign-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/globalsign-site-seal.png"></div>
    </header>
    <div class="main_price">$175</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GlobalSign Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">GlobalSign Wildcard SSL – Domain Validation</h2>
        <div class="post_img"><img width="104" height="53" alt="globalsign-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/globalsign-site-seal.png"></div>
    </header>
    <div class="main_price">$400</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GlobalSign EV">
    <header class="entry-header">
        <h2 class="entry-title">GlobalSign EV SSL</h2>
        <div class="post_img"><img width="104" height="53" alt="globalsign-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/globalsign-site-seal.png"></div>
    </header>
    <div class="main_price">$498</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GlobalSign OV Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">GlobalSign Wildcard SSL – Organization Validation</h2>
        <div class="post_img"><img width="104" height="53" alt="globalsign-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/globalsign-site-seal.png"></div>
    </header>
    <div class="main_price">$600</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post RapidSSL Standard">
    <header class="entry-header">
        <h2 class="entry-title">RapidSSL Single Domain Certificate</h2>
        <div class="post_img"><img width="94" height="53" alt="rapidssl-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/rapidssl-site-seal.png"></div>
    </header>
    <div class="main_price">$30</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post RapidSSL Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">RapidSSL Wildcard Certificate</h2>
        <div class="post_img"><img width="94" height="53" alt="rapidssl-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/rapidssl-site-seal.png"></div>
    </header>
    <div class="main_price">$120</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Symantec Code">
    <header class="entry-header">
        <h2 class="entry-title">Symantec Code Signing Certificate</h2>
        <div class="post_img"><img width="102" height="53" alt="symantec-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/symantec-site-seal.png"></div>
    </header>
    <div class="main_price">$499</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Symantec OV">
    <header class="entry-header">
        <h2 class="entry-title">Symantec Secure Site</h2>
        <div class="post_img"><img width="102" height="53" alt="symantec-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/symantec-site-seal.png"></div>
    </header>
    <div class="main_price">$299</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Symantec OV">
    <header class="entry-header">
        <h2 class="entry-title">Symantec Secure Site Pro</h2>
        <div class="post_img"><img width="102" height="53" alt="symantec-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/symantec-site-seal.png"></div>
    </header>
    <div class="main_price">$800</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Symantec EV">
    <header class="entry-header">
        <h2 class="entry-title">Symantec Secure Site EV SSL</h2>
        <div class="post_img"><img width="102" height="53" alt="symantec-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/symantec-site-seal.png"></div>
    </header>
    <div class="main_price">$800</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Symantec EV">
    <header class="entry-header">
        <h2 class="entry-title">Symantec Secure Site Pro EV SSL</h2>
        <div class="post_img"><img width="102" height="53" alt="symantec-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/symantec-site-seal.png"></div>
    </header>
    <div class="main_price">$1200</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte Standard">
    <header class="entry-header">
        <h2 class="entry-title">Thawte SSL123</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$75</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte OV">
    <header class="entry-header">
        <h2 class="entry-title">Thawte SSL WebServer</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$150</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte Code">
    <header class="entry-header">
        <h2 class="entry-title">Thawte Code Sign Certificate</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$200</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte OV">
    <header class="entry-header">
        <h2 class="entry-title">Thawte SGC SuperCert</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$325</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte OV Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">Thawte Wildcard SSL</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$500</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte EV">
    <header class="entry-header">
        <h2 class="entry-title">Thawte EV SSL</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$500</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>

        </td>

            </tr>
        </table>

<script language="javascript">
$(document).ready(function () {
    $('.post').show();

    $('.menu-item').find('input:checkbox').on('click', function () {
        var post = $('.post').hide();

        var elements = $('.menu-item').find('input:checked');

        if(elements.length){
            elements.each(function () {
                post.filter('.' + this.id).show();
            });
        }
        else
            post.show();
    });
});
</script>
</body>
</html>

Answer 1

尝试分别处理两个过滤器。此外，如前所述，您的班级＆＃34; SAN UCC＆＃34;应该成为一个词。

过滤可能会变成这样：

 $('.authorities, .types').on('click', function () {
        //Start with all hidden
        var post = $('article.post').hide();

        // Filter by Authority
        var a = $(".authorities").filter(':checked');
        if (a.length) {
            a.each(function () {
                $('.post').filter("." + this.id).show()
            });
        } else post.show();


        //Filter by Certificate type
        var t = $(".types").filter(':checked');
        if (t.length) {
            var tn = $(".types").filter(':not(:checked)');
            tn.each(function () {
                $('.post').filter(":visible").filter("." + this.id).hide()
            });
        }
    });

看看这里：https://jsfiddle.net/han902th/13/

Answer 2

首先我将“SAN UCC”编辑为“SAN-UCC”，因为“.SAN UCC”表示您在<UCC>类对象中搜索.SAN节点。我在您的复选框ID和文章类中对其进行了编辑。

有办法开始：

您将表项目拆分为可检查（使用两个ID“＃table-auth”和“＃table-type”）并单独处理数据
您为每个项目添加了一个新课程（<input id="AlphaSSL" type="checkbox" class="authority"/>和<input id="Standard" class="type" type="checkbox"/>）

然后你处理那样的数据（案例1）：

$(document).ready(function () {
$('.post').show();

$('.menu-item table#table-auth').find('input:checkbox').on('click', function () {
    var post = $('.post').hide();

    var elements = $('.menu-item').find('input:checked');

    if(elements.length){
        elements.each(function () {
            post.filter('.' + this.id).show();
        });
    }
    else
        post.show();
});

$('.menu-item table#table-type').find('input:checkbox').on('click', function () {
    // treat data
});
});

Answer 3

我真的不知道这对你是否有帮助。稍微解决一下。首先在“证书类型”部分的所有复选框中添加一个类class="certType"。基于此类，您可以过滤掉结果。希望这可能会给你一些关于如何解决它的问题。：）

if($(this).attr("class") == "certType"){
    $('.post:visible').filter(':not(.' + this.id + ')').hide();
 }

小提琴here

Answer 4

重建所有JS代码：

$(document).ready(function () {
$('.post').show();

window.certificate = { 
    "auth": [], 
    "type": [] 
};

$('.menu-item table#table-auth input').on('click', function (){
    if( this.checked ) window.certificate.auth.push( this.id );
    else {
        var temp = [];
        for( var a in window.certificate.auth )
            if( window.certificate.auth[ a ] !== this.id )
                temp.push( window.certificate.auth[ a ] );
        window.certificate.auth = temp;
    }
    refreshList( window.certificate );
});

$('.menu-item table#table-type input').on('click', function (){
    if( this.checked ) window.certificate.type.push( this.id );
    else {
        var temp = [];
        for( var t in window.certificate.type ){
            if( window.certificate.type[ t ] !== this.id ){
                temp.push( window.certificate.type[ t ] );
            }
        }
        window.certificate.type = temp;
    }
    refreshList( window.certificate );
});

refreshList = function( cert ){
    var post = $( ".post" ).hide();
    var mixlist = [];
    var temp;
    if( cert.auth.length ){
        for( var a in cert.auth ){
            temp = "." + cert.auth[ a ];
            temp += cert.type.length && ( "." + cert.type.join( "." ) ) || "";
            mixlist.push( temp );
        }
    }
    else{
        if( cert.type.length )
            mixlist.push( "." + cert.type.join( "." ) );
    }

    if( mixlist.length ){
        for( var m in mixlist )
            post.filter( mixlist[ m ] ).show();
    }
    else
        post.show();
}
});

用于在jQuery中过滤结果的复选框

4 个答案: