|
Сообщение от TrogWar
|
|
В некоторых случаях (но далеко не всегда) отмечание чекбокса подвешивается где-то на >400 мс. Меня это очень сильно печалит. Если кто-то даст советы по оптимизации данного кода – буду рад критике!
|
Попробуй такой вариант...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.on {
border: 1px solid;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('#case > input:checkbox').click(function (){
$('#items > .item').removeClass('on');
var fltr=filter();
if (fltr=='') return;
$('#items > .item'+fltr).addClass('on');
});
});
function filter() {
var str='';
$('#case > input:checkbox:checked').each(function (){
var typ=$(this).data('type');
str=str+'[data-'+typ+'="'+$(this).data(typ)+'"]'
});
return str;
};
</script>
</head>
<body>
<!-- Чекбоксы -->
<div id='case'>
<input type="checkbox" data-type="foo" data-foo="foo_item1" />
<input type="checkbox" data-type="foo" data-foo="foo_item2" />
...
<input type="checkbox" data-type="bar" data-bar="bar_item1" />
<input type="checkbox" data-type="bar" data-bar="bar_item2" />
</div>
<!-- Товары -->
<div id='items'>
<div class="item" data-foo="foo_item1" data-bar="bar_item1">
foo_item1 bar_item1
</div>
<div class="item" data-foo="foo_item2" data-bar="bar_item2">
foo_item2 bar_item2
</div>
...
</div>
</body>
</html>