Создание сортировки по параметру блока

Question

Хочу создать сортировку по параметрам блока. Например, при нажатии на кнопку USA, остаются только блоки с классом news-usa. При нажатии на кнопку ALL - снова появляются все блоки. На словах, вроде бы, всё просто, на деле - не смог реализовать. Возможно ли это реализовать на CSS или нужно использовать Javascript?

<!-- Сортировка-->
<div class="sort">
  <ul>
    <li><a href="#" id="btn-all">ALL</a></li>
    <li><span>|</span></li>
    <li><a href="#" id="btn-usa">USA</a></li>
    <li><span>|</span></li>
    <li><a href="#" id="btn-eu">EUROPE</a></li>
  </ul>
</div>

Answer 1

Вариант на jQuery:

$(document).ready(function() {
  $('#btn-all').on("click", function() {$('.red, .green').show();});
  $('#btn-usa').on("click", function() {$('.red').show();$('.green').hide();});
  $('#btn-eu').on("click", function() {$('.green').show();$('.red').hide();});
});

.item {display: inline-block; margin: 5px; padding: 5px;}
.red {background-color: red;}
.green {background-color: green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sort">
  <ul>
    <li><a href="#" id="btn-all">ALL</a></li>
    <li><span>|</span></li>
    <li><a href="#" id="btn-usa">USA</a></li>
    <li><span>|</span></li>
    <li><a href="#" id="btn-eu">EUROPE</a></li>
  </ul>
</div>
<div class="container">
  <div class="item red">usa</div>
  <div class="item red">usa</div>
  <div class="item red">usa</div>
  <div class="item green">europe</div>
  <div class="item green">europe</div>
  <div class="item green">europe</div>
</div>

Answer 2

$('.sort').on('click', 'li a', function(){
  let id = $(this).attr('id').replace(/btn-/gi, '');
  
  if(id !== 'all') $('.container').find('.item').hide();
  $('.container')
    .find('.item'+(id === 'all' ? '' : '[data-cat="'+id+'"]')).show();
});

.sort ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sort li {
  display: inline-block;
}

.sort li.active a {
  color: green;
}

.item[data-cat="usa"] {
  color: blue;
}

.item[data-cat="eu"] {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sort">
  <ul>
    <li><a href="#" id="btn-all">ALL</a></li>
    <li><span>|</span></li>
    <li><a href="#" id="btn-usa">USA</a></li>
    <li><span>|</span></li>
    <li><a href="#" id="btn-eu">EUROPE</a></li>
  </ul>
</div>
<div class="container">
  <div class="item" data-cat="usa">usa</div>
  <div class="item" data-cat="usa">usa</div>
  <div class="item" data-cat="usa">usa</div>
  <div class="item" data-cat="eu">europe</div>
  <div class="item" data-cat="eu">europe</div>
  <div class="item" data-cat="eu">europe</div>
</div>

Answer 3

Тоже jQuery только со спец эффектами

Смотреть на весь экран

let ef = ("slide");

$("#en").on("click", function() {
  $(".item").hide();
  $(".en").show().effect(ef);
})

$("#ru").on("click", function() {
  $(".item").hide();
  $(".ru").show().effect(ef);
})

$("#de").on("click", function() {
  $(".item").hide();
  $(".de").show().effect(ef);
})

$("#all").on("click", function() {
  $(".item").show().effect(ef);
})

.items {
  column-count: 3;
  width: 640px;
  margin: auto;
}

.item {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 4px;
  margin: 8px 6px;
}

.item img {
  display: block;
  margin: 0;
}

.item h3 {
  margin: 0;
  text-align: center;
}

.item p {
  font-size: 12px;
  margin: 0;
}

.nav {
  text-align: center;
  padding: 20px 0
}

button:hover {
  animation: rubber 0.54s linear;
}

@keyframes rubber {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.85, 1.15, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.975, 1.025, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.025, 0.975, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.show {
  display: block;
}

.hide {
  display: none;
}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="nav">
  <button id="all">All</button>
  <button id="en">American</button>
  <button id="ru">Russian</button>
  <button id="de">Germany</button>
</div>

<div class="items">
  <div class="item en">
    <img src="http://placehold.it/200x100" alt="">
    <h3>name 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, ut!</p>
  </div>
  <div class="item ru">
    <img src="http://placehold.it/200x220" alt="">
    <h3>name 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio deleniti tenetur autem.</p>
  </div>
  <div class="item en">
    <img src="http://placehold.it/200x300" alt="">
    <h3>name 3</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur.</p>
  </div>
  <div class="item ru">
    <img src="http://placehold.it/200x150" alt="">
    <h3>name 4</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur est corporis eveniet voluptatum harum.</p>
  </div>
  <div class="item de">
    <img src="http://placehold.it/200" alt="">
    <h3>name 5</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim molestiae praesentium ratione repellat exercitationem.</p>
  </div>
  <div class="item en">
    <img src="http://placehold.it/200x180" alt="">
    <h3>name 6</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, sint.</p>
  </div>
  <div class="item de">
    <img src="http://placehold.it/200x220" alt="">
    <h3>name 7</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea sed animi architecto eveniet quaerat?</p>
  </div>
  <div class="item de">
    <img src="http://placehold.it/200x160" alt="">
    <h3>name 8</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, at!</p>
  </div>
  <div class="item ru">
    <img src="http://placehold.it/200x190" alt="">
    <h3>name 8</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, at!</p>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Answer 4

Их можно выполнить чуть более универсально) На кнопки добавить дата-атрибут, который будет указывать на селектор, который следует показать. Соответственно, пустая строка будет показывать всё:

$('.sort').on('click', function() {
  $('.item').hide();

  var type = $(this).attr("data-show");
  $('.container .item' + type).show();
});

.item { display: inline-block; margin: 5px; padding: 5px; }
.usa { background-color: red; }
.europe { background-color: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button data-show="" class="sort">All</button>
<button data-show=".usa" class="sort">USA</button>
<button data-show=".europe" class="sort">EUROPE</button>

<div class="container">
  <div class="item usa">usa</div>
  <div class="item usa">usa</div>
  <div class="item usa">usa</div>
  <div class="item europe">europe</div>
  <div class="item europe">europe</div>
  <div class="item europe">europe</div>
</div>

И, без jQuery:

let _all = (str) => document.querySelectorAll(str);

_all('.sort').forEach(function(btn) {
  btn.addEventListener('click', function() {
    let className = this.dataset.show;
    
    _all('.item').forEach(function(item) {
      let hasClass = !className ? true : item.classList.contains(className);
      item.style.display = hasClass ? "inline-block" : "none";
    });
  });
});

.item { display: inline-block; margin: 5px; padding: 5px; }
.usa { background-color: red; }
.europe { background-color: green; }

<button data-show="" class="sort">All</button>
<button data-show="usa" class="sort">USA</button>
<button data-show="europe" class="sort">EUROPE</button>

<div class="container">
  <div class="item usa">usa</div>
  <div class="item usa">usa</div>
  <div class="item usa">usa</div>
  <div class="item europe">europe</div>
  <div class="item europe">europe</div>
  <div class="item europe">europe</div>
</div>

Из спортивного интереса, можно конечно реализовать и на чистом CSS))

[type="radio"] { display: none; }

#all:checked ~ .main .container .item { display: inline-block; }
#usa:checked ~ .main .container .item.usa { display: inline-block; }
#europe:checked ~ .main .container .item.europe { display: inline-block; }

#all:checked ~ .main label[for="all"] { background-image: linear-gradient(#f5f5f5, #c5c5c5); }
#usa:checked ~ .main label[for="usa"] { background-image: linear-gradient(#f33, #a00); }
#europe:checked ~ .main label[for="europe"] { background-image: linear-gradient(#0c0, #070); }

/*****/

label {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: 1px solid #ccc;
  background-image: linear-gradient(#fff, #ddd);
  cursor: pointer;
}

label:active {
  background-image: linear-gradient(#ddd, #fff);
}

.item {
  display: none;
  margin: 5px;
  padding: 5px;
}

.usa {
  background-color: red;
}

.europe {
  background-color: green;
}

<input name="bubu" type="radio" id="all" checked>
<input name="bubu" type="radio" id="usa">
<input name="bubu" type="radio" id="europe">
<!-- НЕ вложенные инпуты, прямо вначале body -->

<div class="main">
  <label for="all">All</label>
  <label for="usa">USA</label>
  <label for="europe">EUROPE</label>

  <div class="container">
    <div class="item usa">usa</div>
    <div class="item usa">usa</div>
    <div class="item usa">usa</div>
    <div class="item europe">europe</div>
    <div class="item europe">europe</div>
    <div class="item europe">europe</div>
  </div>
</div>

БЛОГ НА HUSL

Создание сортировки по параметру блока

Ответы (4 шт):