新手可以轻松选择Javascript div

我是一个JS新手，所以我希望这对专家来说是一个简单的问题。我有一个脚本，它当前拉取任何div，其类与单个选中单选按钮匹配。我想更改代码，以便脚本从多个选中的单选框中提取具有任何类的div。例如，如果我选中了两个单选按钮，我只想看到两个类都有的div。以下是当前设置：

Javascript

$(document).ready(function () {
    $('div.tags').find('input:radio').live('click', function () {
        $('.results > li').hide();
        $('div.tags').find('input:checked').each(function () {
            $('.results > li.' + $(this).attr('rel')).show();
        });
    });
});

HTML：

    <div class="tags">
        <label>
            <input type="radio" name="gender" rel="boys" />Boys
        </label>
        <label>
            <input type="radio" name="gender" rel="girls" />Girls
        </label>
        <label>
            <input type="radio" name="gender" rel="allgenders" checked />All
        </label>
        <label>
            <input type="radio" name="style" rel="vintage" />Vintage
        </label>
        <label>
            <input type="radio" name="style" rel="simple" />Simple
        </label>
    </div>
    <ul id="cardsWrapper" class="results">
        <li class="cardsearchWrapper girls allgenders simple">
            girls allgenders simple
        </li>
        <li class="cardsearchWrapper boys allgenders vintage">
            boys allgenders vintage
        </li>
        <li class="cardsearchWrapper girls allgenders vintage">
            girls allgenders vintage
        </li>
        <li class="cardsearchWrapper boys allgenders simple">
            boys allgenders simple
        </li>
    </ul>

男孩
姑娘们
全部的
酿造的
易于理解的


所有性别的女孩都很简单


男男女女复古


女孩所有性别复古


男男女女都很简单

但这仅从“性别”单选按钮中选择类

---

谢谢

我建议，假设您可以切换到使用

on（）

，而不是

live（）

：

男孩
姑娘们
全部的
酿造的
易于理解的


所有性别的女孩都很简单


男男女女复古


女孩所有性别复古


男男女女都很简单

代码变得有点复杂，但它是可以完成的。您只需获取每个输入的检查值，然后从那里开始：

$（'input[type=radio]'）。在（'change'，function（）上{
//步骤1：获取所有已检查的输入。
变量输入=$（'input[type=radio]：选中'）；
//步骤2：获取所有列表项并重置其可见性。
var lis=$（'cardswraper li'）；
lis.show（）；
//步骤3：对于每个选中的输入，获取rel。如果它有效，
//隐藏不匹配的元素。
输入。每个功能（即，e）{
var值=$（e）.attr（'rel'）；
if（value）lis.not（'.'+value）.hide（）；
});
});

男孩
姑娘们
全部的
酿造的
易于理解的


所有性别的女孩都很简单


男男女女复古


女孩所有性别复古


男男女女都很简单

以下是更改其中一个单选按钮时代码所做的操作：

隐藏所有李元素
显示所有匹配的性别元素（不考虑样式）
显示所有匹配的样式元素
您没有“隐藏”步骤3中步骤2中显示的不匹配样式元素

或许可以尝试颠倒逻辑：

显示所有li元素
隐藏所有不匹配的性别元素
隐藏所有不匹配的样式元素
您已经得到了一些不错的建议，我只是添加以下方法来展示另一种方法：

$(document).ready(function () {
    $('div.tags').find('input:radio[name="gender"], input:radio[name="style"]').on('click', function () {
        $('#cardsWrapper li').hide();
        gender = $('input:radio[name="gender"]:checked').attr("rel");
        style = $('input:radio[name="style"]:checked').attr("rel");
        $('#cardsWrapper li' + (gender ? ('.' + gender) : '') + (style ? ('.' + style) : '')).show();
    });
});

您使用的是哪个版本的jQuery，在1.6版中被弃用，在1.9版中被完全删除；是否有理由使用这个（相对）过时的图书馆版本？
$(document).ready(function () {
    $('div.tags').find('input:radio[name="gender"], input:radio[name="style"]').on('click', function () {
        $('#cardsWrapper li').hide();
        gender = $('input:radio[name="gender"]:checked').attr("rel");
        style = $('input:radio[name="style"]:checked').attr("rel");
        $('#cardsWrapper li' + (gender ? ('.' + gender) : '') + (style ? ('.' + style) : '')).show();
    });
});