Есть 8 блоков, нужно по нажатию на ссылку фильтровать эти самые блоки. При нажатии на "однокомнатные" , ставить однокомнатные первыми в списке. И тоже самое с остальными. Сам такое не реализовывал, но хотел бы научиться.
2 ответа
Второй вариант
$(document).ready(function(){
$(".button").click(function(){
var value = $(this).attr("data-filter");
var elem = $(".elem");
if(value == "all"){
$(elem).show("500");
}
else{
$(elem).not("."+value).hide("500");
$(elem).filter("."+value).show("500");
}
});
})
*{
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}
.clear,.clear:before,.clear:after{
content:"";
display:block;
clear:both;
}
ul,.items{
margin:50px auto;
width:80%;
}
ul li{
float:left;
padding:10px 30px;
background:#ccc;
font-weight:900;
font-family:helvetica;
margin:0 10px;
cursor:pointer;
}
ul li.site-i:focus{
background:tomato;
}
ul li.foto-i:focus{
background:lightblue;
}
ul li.template-i:focus{
background:lightgreen;
}
ul li.all-i:focus{
background:#ccc;
}
li:focus{
outline:none;
border:none;
color:#fbfbfb;
}
.item{
width:30%;
height:100px;
float:left;
margin:3px;
text-align:center;
line-height:100px;
font-size:1.6em;
color:#fbfbfb;
font-weight:900;
font-family:Helvetica;
font-variant:small-caps;
}
.site{
background:tomato;
}
.foto{
background:lightblue;
}
.template{
background:lightgreen;
}
@media (max-width:1200px){
ul li{
zoom:.9;
}
.item{
zoom:.6;
}
}
@media (max-width:956px){
ul li{
zoom:.8;
}
.item{
zoom:.5;
}
}
@media (max-width:768px){
ul{
margin:10px auto;
}
ul li{
margin-left:0;
}
.items{
margin:10px auto;
}
.item{
width:45%;
zoom:.45;
}
}
@media (max-width:480px){
ul{
margin:10px auto;
}
ul li{
zoom:.6;
}
.items{
margin:10px auto;
}
.item{
width:45%;
zoom:.35;
font-size:3em;
}
}
@media (min-width:1200px){
ul li{
zoom:.8;
}
.item{
zoom:.5;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<ul class="clear">
<li class="button all-i" data-filter="all" tabindex="-1">all</li>
<li class="button site-i" data-filter="site" tabindex="-2">site</li>
<li class="button foto-i" data-filter="foto" tabindex="-3">foto</li>
<li class="button template-i" data-filter="template" tabindex="-4">template</li>
</ul>
<div class="items clear">
<div class="item elem site">site</div>
<div class="item elem foto">foto</div>
<div class="item elem site">site</div>
<div class="item elem foto">foto</div>
<div class="item elem template">template</div>
<div class="item elem foto">foto</div>
<div class="item elem template">template</div>
<div class="item elem site">site</div>
<div class="item elem template">template</div>
<div class="item elem site">site</div>
<div class="item elem foto">foto</div>
<div class="item elem site">site</div>
<div class="item elem foto">foto</div>
<div class="item elem template">template</div>
<div class="item elem foto">foto</div>
<div class="item elem template">template</div>
<div class="item elem site">site</div>
<div class="item elem template">template</div>
</div>
</div>
-
Зачем вы делаете 2 ответа? - когда можно было оформить 2 примера ваших работ в одном ответе.– And11 мая 2018 в 22:59
-
@And тут многие так делают ....– user3327411 мая 2018 в 23:00
-
-
@МаксимЛенский два ответа стоит давать только в исключительных случаях (например, если первый ответ уже принят, и добавление в него чего-то нового радикально изменит смысл). Если у вас просто два варианта решения - лучше приводить их в одном ответе, с указанием плюсов и минусов каждого.– user17722113 мая 2018 в 10:48
Собственно так это делается
var fActive = '';
function filterColor(color) {
if (fActive != color) {
$('div').filter('.' + color).slideDown();
$('div').filter(':not(.' + color + ')').slideUp();
fActive = color;
}
}
$('.f-red').click(function() {
filterColor('red');
});
$('.f-blue').click(function() {
filterColor('blue');
});
$('.f-green').click(function() {
filterColor('green');
});
$('.f-all').click(function() {
$('div').slideDown();
fActive = 'all';
});
body {
padding: 10%;
font-family: sans-serif;
}
button {
padding: 1em;
border: 0;
margin: 0.25em;
color: #fff;
cursor: pointer;
}
.f-red {
background: #ff4136;
}
.f-red:hover {
background: #e90d00;
}
.f-green {
background: #2ecc40;
}
.f-green:hover {
background: #208e2c;
}
.f-blue {
background: #0074d9;
}
.f-blue:hover {
background: #004b8c;
}
.f-all {
background: #333;
}
.f-all:hover {
background: #0d0d0d;
}
.red,
.green,
.blue {
color: #fff;
padding: 1em;
margin-bottom: 0.25em;
}
.red {
background: #ff4136;
}
.green {
background: #2ecc40;
}
.blue {
background: #0074d9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<button class="f-red">Фильтр красных элементов</button>
<button class="f-blue">Фильтр синих элементов</button>
<button class="f-green">Фильтр зеленых элементов</button>
<button class="f-all">Все элементы</button>
</p>
<div class="red">Первый</div>
<div class="red">Второй</div>
<div class="blue">Третий</div>
<div class="green">Четвертый</div>
<div class="red">Пятый</div>
<div class="blue">Шестой</div>
<div class="blue">Седьмой</div>
<div class="green">Восьмой</div>