javascript - 允许在 jquery 中的一个函数中使用多个选择器

Question

我有一个下拉框，可以在其中选择“类别”，如果更改它，它会加载新类别，如下面的代码所示。从那以后，我引入了一个“子类别”系统，我需要稍微修改一下这段代码。我发现以下信息非常有用:

How to attach different events on multiple selectors through .on function in jquery? .

但是，它并没有完全解决我的问题...我可以使用它为同一函数中的每个选择器运行两个单独的事件，但我需要同时运行这两个事件-类别”被选中。尽管它们也需要能够单独运行，但如果只选择了一个。我是 js/jquery 的新手，所以您提供的信息越多越好!非常感谢!

    <script type='text/javascript'>
    $(document).ready(function()
    {
        $('select#selectCategory').change(function()
        {
            var cat = $('select#selectCategory').val();
            var subcat

            if(cat > 0)
            {
                var param = '&category_id=' + cat;
            }else{
                var param = '';
            }
            var href = './videoroom.php?action=video_gallery'+ param +'&page=1';
            window.location.href = href;
        });
    });
    </script>

这是与已编写的 jquery 代码相关的 HTML 部分:

        <select style="min-weight:100px;" name="filter_by_cat" id="selectCategory">
                <option value="0">All</option>
                <option value="9">Wizard101</option>
                <option value="10">Pirate101</option>
                <option value="11">Pet Derby</option>
                <option value="14">Misc/Fun</option>
        </select>

这是我为新创建的子类别添加的新内容:

        <select style="min-weight:100px;" name="filter_by_subcat" id="selectSubCategory">
                <option value="0">All</option>
                <option value="21">General PvP</option>
                <option value="22">PvPC Matches</option>
                <option value="23">PvP Guides</option>
                <option value="24">Miscellaneous</option>
        </select>

Answer 1

将事件监听器添加到两个下拉列表中，并在其中一个发生更改时检查它们:

jsFiddle

$('#selectCategory, #selectSubCategory').change(function() {
    var cat = $('#selectCategory').val();
    var subcat = $('#selectSubCategory').val();

    var params = [
        'action=video_gallery',
        'page=1'
    ];

    if (cat > 0) {
        params.push('category_id='+ cat);
        if (subcat > 0) {
            params.push('subcategory_id='+ subcat);
        }
    }

    var href = './videoroom.php?'+ params.join('&');
    window.location.href = href;
});

我假设您只希望在选择主要类别时考虑子类别选择。如果不是这种情况，请将第二个 if 语句移到第一个 if 语句之外。

我还稍微重构了您的代码，使其更易于扩展且 (IMO) 更简洁。我将所有参数添加到一个数组中，然后它们只是在最后加入它们。如果您需要添加更多参数，只需将它们也放入数组即可。