1

Есть 8 блоков, нужно по нажатию на ссылку фильтровать эти самые блоки. При нажатии на "однокомнатные" , ставить однокомнатные первыми в списке. И тоже самое с остальными. Сам такое не реализовывал, но хотел бы научиться.

123

1
  • Было бы не плохо увидеть пример с анимацией. 11 мая 2018 в 17:53

2 ответа 2

3

Второй вариант

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

4
  • Зачем вы делаете 2 ответа? - когда можно было оформить 2 примера ваших работ в одном ответе.
    – And
    11 мая 2018 в 22:59
  • @And тут многие так делают ....
    – user33274
    11 мая 2018 в 23:00
  • очень круто! спасибо! как будет время, сяду анализировать! 12 мая 2018 в 6:28
  • @МаксимЛенский два ответа стоит давать только в исключительных случаях (например, если первый ответ уже принят, и добавление в него чего-то нового радикально изменит смысл). Если у вас просто два варианта решения - лучше приводить их в одном ответе, с указанием плюсов и минусов каждого.
    – user177221
    13 мая 2018 в 10:48
2

Собственно так это делается

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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.