jquery - 使用选择器加速此 jQuery 代码

Question

我为许多对象的列表编写了一个过滤器。用户可以通过单选按钮选择他们的选项。

在我的过滤器功能中，我选择两个单选组/集的选中单选按钮:

if ( $('#filter input[name="interval"]:checked').val() == 'all' ) {
    if( $('#filter input[name="day"]:checked').val() == 'all' ) {
        var searchSelector = "li";
    } else {
        var searchSelector = "li[data-day=" + $('#filter input[name="day"]:checked').val() + "]";
    }
} else {
    if( $('#filter input[name="day"]:checked').val() == 'all' ) {
        var searchSelector = "li[data-interval=" + $('#filter input[name="interval"]:checked').val() + "]";
    } else {
        var searchSelector = "li[data-interval=" + $('#filter input[name="interval"]:checked').val() + "]" + "li[data-day=" + $('#filter input[name="day"]:checked').val() + "]";
    }
}

正如 jQuery Performance Rules 中所述我应该缓存 jQuery 对象。通常这种做法总是有效的 - 但在这种情况下，我的第二个单选按钮的值始终输出第一个检查值的值。

有什么想法吗，我如何简化这个 jQuery 代码？

谢谢

以下是按钮的 HTML:

<form id="filter">
    <fieldset>
        <label>
            <input type="radio" name="interval" value="all">
            all</label>
        <label>
        <label>
            <input type="radio" name="interval" value="hourly">
            hourly</label>
        <label>
            <input type="radio" name="interval" value="daily">
            daily</label>
        <label>
            <input type="radio" name="interval" value="weekly">
            weekly</label>
        <label>
            <input type="radio" name="interval" value="monthly">
            monthly</label>
        <label>
            <input type="radio" name="interval" value="yearly">
            yearly</label>
    </fieldset>
    <fieldset>
        <label>
            <input type="radio" name="day" value="all">
            all</label>
        <label>
            <input type="radio" name="day" value="monday">
            monday</label>
        <label>
            <input type="radio" name="day" value="tuesday">
            tuesday</label>
        <label>
            <input type="radio" name="day" value="wednesday">
            wednesday</label>
        <label>
            <input type="radio" name="day" value="thursday">
            thursday</label>
        <label>
            <input type="radio" name="day" value="friday">
            friday</label>
    </fieldset>
</form>

这就是我的列表:

<li data-day="monday" data-interval="weekly">foo</li>
<li data-day="friday" data-interval="yearly">foo</li>

Answer 1

下面应该可以做到这一点

var $interval = $('#filter input[name="interval"]'),
    $day = $('#filter input[name="day"]');

    $('#filter input:radio').change(function(){
        var interval = $interval.filter(':checked').val() || 'all',
            day = $day.filter(':checked').val()|| 'all',
            searchSelector = 'li';

            searchSelector += (day != 'all') ? '[data-day=' + day  + ']' : '';
            searchSelector += (interval != 'all') ? '[data-interval=' + interval  + ']' : '';
          }
        /*do what you want with the selector here*/
    });

示例:http://www.jsfiddle.net/gaby/xPMn5/