#javascript #jquery #html #asp.net #ajax
#javascript #jquery #HTML #asp.net #ajax
Вопрос:
Я пытаюсь фильтровать с помощью флажка. но у меня есть некоторые проблемы. когда я выбираю категорию продукта, я получаю элемент каждой категории, но когда я отменяю выбор всех, там нет ни одного продукта. я хочу сделать это, если я отменю выбор элемента категории, я хочу показать весь продукт, как я могу это сделать? помогите мне, пожалуйста?
<div class="tags">
<label>
<input type="checkbox" rel="arts" />
Arts
</label>
<label>
<input type="checkbox" rel="computers" />
Computers
</label>
<label>
<input type="checkbox" rel="health" />
Health
</label>
<label>
<input type="checkbox" rel="video-games" />
Video Games
</label>
</div>
<ul class="results">
<li class="arts computers">Result 1</li>
<li class="video-games">Result 2</li>
<li class="computers health video-games">Result 3</li>
<li class="arts video-games">Result 4</li>
</ul>
jquery ,
,
$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
$('.results > li').hide();
$('div.tags').find('input:checked').each(function () {
$('.results > li.' $(this).attr('rel')).show();
});
});
});
Вы можете просматривать онлайн с помощью jsfiddle
Комментарии:
1. .live устарел для .on
Ответ №1:
Используйте .length , чтобы получить длину выбранного флажка. Если 0 показать все li
if(!$('div.tags').find('input:checked').length){ //or .length == 0
$('.results > li').show();
}
Комментарии:
1. Я бы предпочел ==0 вместо !
2. Добавил ваше предложение к ответу.
Ответ №2:
Попробуйте так
$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
if ($(this).prop("checked")) {
$('.results > li').toggle('show');
$('div.tags').find('input:checked').each(function () {
$('.results > li.' $(this).attr('rel')).toggle('show');
});
} else{
$('.results > li').show();
}
});
});
Живая демонстрация
также переключение (‘show’) придает ему приятный эффект
you Can just use Show() and hide() instead of toggle('show')
Комментарии:
1. за исключением переключения («показать») не будет работать так, как можно было бы ожидать при последнем показе
2. @mplungjan okzz я просто проверял это
3. Вы можете использовать show(300) для того же эффекта для последнего
Ответ №3:
Поставьте условие следующим образом if($('div.tags').find('input:checked').length > 0)
$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
$('.results > li').hide();
if($('div.tags').find('input:checked').length > 0){
$('div.tags').find('input:checked').each(function () {
$('.results > li.' $(this).attr('rel')).show();
});
}
else{
$('.results > li').show();
}
});
});
Ответ №4:
попробуйте эту скрипку
$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
$('.results > li').hide();
if( $('div.tags').find('input:checked').length > 0)
{
$('div.tags').find('input:checked').each(function () {
$('.results > li.' $(this).attr('rel')).show();
});
}else
{
$('.results > li').show();
}
});
});
вам просто нужно проверить, выбран ли какой-либо параметр
Комментарии:
1. как я могу поместить панель значков загрузки img для этого кода?
Ответ №5:
попробуйте это….
$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
var count=0;
$('.results > li').hide();
$('div.tags').find('input:checked').each(function () {
$('.results > li.' $(this).attr('rel')).show();
count=1;
});
if(count == 0)
{
$('.results > li').show();
}
});
});