0

我有几个单选按钮和列表项列表（ul/li）的页面。首次进入页面时，将显示完整列表。检查收音机将缩小列表范围。

我找到了一些 jquery 代码，它运行良好。我想要并且无法找到/做的（除了当前的过滤）是在页面加载时开始过滤（还没有点击），这样如果有任何预定义/预检查的收音机（如下面的第一个收音机）列表将是已过滤的列表 - 不是完整列表。

谢谢你的帮助！这是 jsfiddle 上的链接：http: //jsfiddle.net/3NdHt/

<div class="tags">
<label><input type="radio" rel="apac" name="geo" checked /> APAC</label>
<label><input type="radio" rel="emea" name="geo" /> EMEA</label>
<label><input type="radio" rel="east" name="geo" /> US East</label>
<label><input type="radio" rel="west" name="geo" /> US West</label>
</div>
<br />

<ul class="results">
<li class="apac">APAC 1</li>
<li class="apac">APAC 1</li>      
<li class="emea">EMEA </li>
<li class="west east">WEST EAST 1</li>  
<li class="west">WEST 2</li>     
<li class="east">EAST</li>      
</ul>

查询：

$(document).ready(function() {
$('div.tags').delegate('input[type=radio]', 'change', function() {
  var $lis = $('.results > li'),
  $checked = $('input:checked');
  if ($checked.length) {
    var selector = $checked.map(function (){
        return '.' + $(this).attr('rel');
    }).get().join('');
        $lis.hide().filter(selector).show();  
  } else {
    $lis.show();
}
});
});
4

1 回答 1

1

将函数从委托的更改事件中拉出（顺便说一句，您应该使用.on()而不是.delegate()），然后在文档准备好时调用它。

jsFiddle 示例

$('div.tags').delegate('input[type=radio]', 'change', update);
update(); // THIS CALLS THE FUNCTION ON DOC READY

function update() {
    var $lis = $('.results > li'),
        $checked = $('input:checked');
    if ($checked.length) {
        var selector = $checked.map(function () {
            return '.' + $(this).attr('rel');
        }).get().join('');

        $lis.hide().filter(selector).show();

    } else {
        $lis.show();
    }
}
于 2013-01-23T21:36:51.987 回答