Как переключить все элементы списка, которые не равны определенному тексту / категории? - PullRequest
Новая
       21

Как переключить все элементы списка, которые не равны определенному тексту / категории?

0 голосов
/ 24 января 2019

У меня есть список HTML и я хочу фильтровать по определенной категории. Например, мой список: 

<ul class="myList">
  <li class="list-choose">
      <input class="input-choose" type="checkbox" id="[ID]" name="ID[]"/>
      <label class="label-choose" for=[ID]></label>

      <div class="subtitle">
         <span class="category">[category]</span>
      </div>
  </li>
</ul>

(всего имеется около 40 элементов списка, которые должны быть отфильтрованы при выборе категории)

Теперь я хочу создать фильтр категорий (в виде флажков / кнопок / ..), чтобы вы могли выбрать, какую категорию вы хотите отображать, и скрыть все другие элементы, которые не входят в эту выбранную категорию. Мои элементы списка создаются массивом (например, [категория]), так что элемент списка имеет свою собственную категорию. Но как я могу отфильтровать только выбранную категорию? Я надеюсь, что кто-нибудь может мне помочь, потому что мои знания Javascript не самые лучшие.

Спасибо!

Я пробовал этот Javascript, но он не работает: 

function filter(element) {

var $trs = $('#myList .list-choose .subtitle input label').hide();
var regexp = new RegExp($(element).val(), 'i');
var $valid = $trs.filter(function () {
    return regexp.test($(this).find('label').text())
}).show();
$trs.not($valid).hide()

}

$('input, select').on('keyup change', function () {
if($(this).val() !== ""){
    filter(this);
} else{
    $('#myList .list-choose .subtitle').show();
}

});
...