Добавить класс ко всем элементам с определенным классом

Я немного новичок в javascript и jquery, и у меня есть некоторые проблемы, делающие то, что я хочу, "красивым" способом.

У меня есть веб-страница HTML, например:

<div class="list-group">
   <a href="#all" id="category-all" class="list-group-item active">All</a>
   <a href="#" id="category-0" class="list-group-item">Foo</a>
   <a href="#" id="category-1" class="list-group-item">Bar</a>
   <a href="#" id="category-2" class="list-group-item">FooBar</a>
</div>
<div class="row">
   <div class="category-0">element 1</div>
   <div class="category-1">element 1</div>
   <div class="category-1">element 1</div>
   <div class="category-0">element 1</div>
   <div class="category-2">element 1</div>
   <div class="category-0">element 1</div>
   <div class="category-2">element 1</div>
</div>

Я хотел бы добавить какой-то "фильтр", где, если вы нажмете ссылку на определенную категорию, все элементы из других категорий исчезнут. Мне удалось сделать это, добавив класс в мой css под названием invis с "display: none", а затем написал следующее:

$( ".list-group-item" ).click(function() {
  $(".list-group-item").removeClass('active');
  $( this ).toggleClass("active");
  var test = "." + event.target.id;
  $(".category-0").addClass('invis');
  $(".category-1").addClass('invis');
  $(".category-2").addClass('invis');
  if (test == ".category-0")
    $(".category-0").removeClass('invis');
  if (test == ".category-1")
    $(".category-1").removeClass('invis');
  if (test == ".category-2")
    $(".category-2").removeClass('invis');
  if (test == ".category-all") {
    $(".category-0").removeClass('invis');
    $(".category-1").removeClass('invis');
    $(".category-2").removeClass('invis');
  }
});

Это делает эту работу, но я бы хотел найти "более чистый" способ сделать это. Как я могу улучшить его?

Спасибо!

Ответы

Ответ 1

Один из способов сделать это с помощью jQuery - это скрыть все <div> при щелчке элемента управления фильтром, а затем отобразить те, которые вы хотите показать.

Таким образом вам не понадобится ваш дополнительный класс invis.

вы заметите символ "^ =" в приведенном ниже коде, это просто селектор, который буквально означает "начинается с".

$('a[id^="category"]').click(function() {
// when an <a> element is click THAT has an ID that starts with "category" ...

  $('div[class^="category"]').hide();
  // hide every <div> that ID starts with "category" ...
  $('div.' + this.id).show();
  // re-show every <div> that CLASS matches the original <a> ID ...
});
$('a[id="show-all"]').click(function() {
  // if the "all" is clicked, show them ALL again.
  
  $('div[class^="category"]').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
  <a href="#all" id="show-all" class="list-group-item active">All</a>
  <a href="#" id="category-0" class="list-group-item">Foo</a>
  <a href="#" id="category-1" class="list-group-item">Bar</a>
  <a href="#" id="category-2" class="list-group-item">FooBar</a>
</div>
<div class="row">
  <div class="category-0">Foo</div>
  <div class="category-1">Bar</div>
  <div class="category-1">Bar</div>
  <div class="category-0">Foo</div>
  <div class="category-2">FooBar</div>
  <div class="category-0">Foo</div>
  <div class="category-2">FooBar</div>
</div>

Ответ 2

Скрыть все элементы с классом "строка", а затем скрыть все элементы с классом [id того, что было нажато] в классе "строка".

$('.list-group-item').click(function(event) {
  $('.row').addClass('invis');
  $('.row.' + event.target.id).removeClass('invis');
});

Ответ 3

Просто добавив ко всем вашим категориям .category-all, вы сделали половину работы.
Теперь вы можете легко управлять отношениями id → > class.

jsBin demo

Если вам нужно, чтобы по крайней мере одна категория была видна достаточно просто:

var $btns = $(".list-group-item");
var $ctgs = $("[class^='category-']");
$ctgs.addClass("category-all");                         // Job done! :D :D

$btns.click(function(e) {
  $ctgs.hide();                                         // Hide all
  $("."+this.id).show();                                // Show realated
});

В противном случае, приведенный ниже код позволит вам получить любую комбинацию, которую вы желаете, И даже скрыть/переключить активные:

jsBin demo

var $btns = $(".list-group-item");
var $ctgs = $("[class^='category-']");
$ctgs.addClass("category-all");                         // Job done! :D :D


$btns.click(function(e) {    
  $ctgs.not("."+this.id).hide();                        // Hide all (not this...)
  $("."+this.id).toggle( $(this).hasClass("active") );  // Toggle realated
});

Ответ 4

Отказ от ответственности: не проверен.

$('.list-group-item').click(function() {
    $('.list-group-item').removeClass('active');
    $(this).addClass('active');
    var id = $(this).attr('id');
    if(id == 'category-all') {
        $('div.row > div').show();
    } else {
        $('div.row > div.' + id).show();
        $('div.row > div:not(.' + id + ')').hide();
    }
});

Ответ 5

Здесь другая версия. Добавлена цветовая кодировка для видимости. * Редактировать обновление, чтобы иметь правильное поведение.

http://codepen.io/anon/pen/NPrGJp

$( ".list-group-item" ).click(function() {
  $('.active').removeClass('active');
  $(this).addClass('active');
  $('.row > div').show();
  $('.' + $(this).attr('id')).hide();
});