Question

我正在尝试在jquery中过滤元素，但它的行为令人发疯。任何人都可以帮助修复它？

$('ul li a').on('click', function(e) {
  e.preventDefault();
  let selected = $(this).attr('data-filter');
  $('.container div:visible').addClass('hide');
  $('.container div:hidden').fadeIn(0);
  $('.container div').on("transitionend", function() {
    console.log($('.container div').length);
    $('.container div:not(.' + selected + ')').fadeOut();
    $('.container div.' + selected).fadeIn(100, function() {
      $(this).removeClass('hide');
    });
  });
});

ul {
  margin: 20px;
  padding: 0;
}

ul li {
  display: inline-block;
  padding-right: 10px;
  font-size: 20px;
}

ul li a {
  text-decoration: none;
  color: #333;
}

ul li a:hover,
ul li a.active {
  color: gold;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 15px;
}

.container div {
  transition: transform .5s;
}

.container div.red {
  background: red;
}

.container div.green {
  background: green;
}

.container div.blue {
  background: blue;
}

.container div:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.hide {
  transform: scale(0);
}

body {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="#" data-filter="red">red</a></li>
  <li><a href="#" data-filter="green">green</a></li>
  <li><a href="#" data-filter="blue">blue</a></li>
</ul>

<div class="container">
  <div class="green"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="blue"></div>
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="blue"></div>
  <div class="blue"></div>
  <div class="green"></div>
</div>

你好，我正在尝试使元素在jquery中过滤，但是它的行为令人发疯。任何人都可以帮助修复它？

过滤元素jquery

0 个答案: