Сужение отображаемого содержимого по флажку

Я ищу, чтобы изменить этот код, чтобы отображаемые результаты имели значения всех флажков. Например, при проверке «компьютеров» и «видеоигр» у меня будет только результат 3.Сужение отображаемого содержимого по флажку

Как я могу внести это изменение?

<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> 

$('div.tags').delegate('input:checkbox', 'change', function() 
{ 
var $lis = $('.results > li').hide(); 
//For each one checked 
var numChecked = $('input:checked').each(function() 
{ 
     $lis.filter('.' + $(this).attr('rel')).show(); 
}).length; 

if (!numChecked) $lis.show(); 
});

http://jsfiddle.net/gZUrA/2/

источник

2014-07-29 SmilingViking

Я изменил свой [тег: Java] тег в [тег: JavaScript] тег. Пожалуйста, поймите, что это два совершенно разных языка программирования, которые так же тесно связаны с ветчиной и гамбургером, и что если вы неправильно пометите свой вопрос, вы не получите правильных экспертов для его обзора, и это повредит вашим шансам получить достойную помощь. Поскольку я ничего не знаю о Javascript, это все, что я могу сделать для вас, кроме как пожелать вам здоровья и надеюсь, что вы получите достойный ответ в ближайшее время. –

Спасибо за редактирование, я обвиняю его в небрежности, а не в невежестве. – SmilingViking

Я не уверен в вашем коде, но только FYI, если вы этого не знали, есть система под названием AngularJS, которая предназначена для таких вещей. Он имеет некоторую кривую обучения, но мощный, как только вы это знаете. – StoneMan

Вы можете получить массив проверяемых имен и использовать его, чтобы создать селектор для вызова .filter().

$('div.tags').delegate('input:checkbox', 'change', function() { 
    var checkedNames = $('div.tags input:checkbox:checked').map(function() { return $(this).attr('rel'); }).get(); 

    if (checkedNames.length > 0) { 
     var selector = '.' + checkedNames.join('.'); 
     $('.results > li').hide().filter(selector).show(); 
    } else { 
     $('.results > li').show() 
    } 
});

jsfiddle

источник

2014-07-29 21:58:35

Сужение отображаемого содержимого по флажку

ответ

Смежные вопросы