При использовании элемента фильтра изотопов, показанного в столбце - PullRequest
Новая
       54

При использовании элемента фильтра изотопов, показанного в столбце

0 голосов
/ 19 марта 2020

У меня проблема со сценарием ..... Я новичок в веб-разработке, и я нашел какой-то плагин фильтра в inte rnet, когда я использую его для моего сайта (демо), у меня есть некоторые проблемы ... пример.

введите описание изображения здесь

Это то, что я хочу ..... Но когда я использую запрос фильтра, мои элементы были показаны в одном столбце. вот так

введите описание изображения здесь

Html 

$(function() {

  var $grid = $('#container');
  $grid.isotope({
    itemSelector: '.item'
  });

  var filters = []; // A convenient bucket for all the filter options, 
  // just so we don't have to look them up in the DOM every time.
  // (a global array is maybe sort of not the most elegant 
  // way you could deal with this but you get the idea.)

  // Search event handlers
  $('.quicksearch').on('keyup', function() {
    // debounce removed for brevity, but you'd put it here
    filters[0] = this.value;
    runFilter();
  });
  $('#filter-select').on('change', function() {
    filters[1] = this.value;
    runFilter();
  });
  // and so on if more filters needed

  // The filter itself
  var runFilter = function() {
    $grid.isotope({
      filter: function() {
        if (filters[0]) {
          // at least some search text was entered:
          var qsRegex = new RegExp(filters[0], 'gi');

          // if the title doesn't match, eliminate it:
          if (!$(this).find('.content-title').text().match(qsRegex)) {
            return false;
          }
        }

        if (filters[1]) {
          // a category was selected; filter out others:
          if (!($(this).hasClass(filters[1]))) {
            return false;
          }
        }

        // etcetera, for any other filters 

        // successfully passed all conditions, so:
        return true;
      }
    });
  }
});
body {
  background-color: #333642;
  margin: 0;
}

.item {
  display: block;
}

.red .content {
  background-color: tomato;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
}

.blue .content {
  background-color: dodgerblue;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
}

.green .content {
  background-color: green;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
}

.comedy .content {
  background-color: #131417;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
}

.content-title {
  background-color: gray;
  border-radius: 0 0 8px 8px;
  text-align: center;
  padding: 8px;
}
<!DOCTYPE html>
<html>

<head>
  <title>My Website</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>

  <div id="filters">
    Color:
    <select id="filter-select">
      <option value="">All</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="comedy">Comedy</option>
    </select><br> Title: <input type="text" class="quicksearch">
  </div>

  <div class="container" id="container">
    <div class="row">
      <div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>fy Title 1</h3>
        </div>
      </div>
      <div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 2</h3>
        </div>
      </div>
      <div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 3</h3>
        </div>
      </div>
      <div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 4</h3>
        </div>
      </div>
      <div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 5</h3>
        </div>
      </div>
      <div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 6</h3>
        </div>
      </div>
      <div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 7</h3>
        </div>
      </div>
      <div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 8</h3>
        </div>
      </div>
      <div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 9</h3>
        </div>
      </div>
      <div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 10</h3>
        </div>
      </div>
      <div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 11</h3>
        </div>
      </div>
      <div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
        <div class="content mt-4">
          <h1>content</h1>
        </div>
        <div class="content-title">
          <h3>My Title 12</h3>
        </div>
      </div>
    </div>
  </div>


  <script src="js/filter.js"></script>

</body>

</html>

1 Ответ

0 голосов
/ 19 марта 2020

Удалено 'id = "container" ", затем работает нормально 

$(function() {

  var $grid = $('#container');
  $grid.isotope({
    itemSelector: '.item'
  });

  var filters = []; // A convenient bucket for all the filter options, 
  // just so we don't have to look them up in the DOM every time.
  // (a global array is maybe sort of not the most elegant 
  // way you could deal with this but you get the idea.)

  // Search event handlers
  $('.quicksearch').on('keyup', function() {
    // debounce removed for brevity, but you'd put it here
    filters[0] = this.value;
    runFilter();
  });
  $('#filter-select').on('change', function() {
    filters[1] = this.value;
    runFilter();
  });
  // and so on if more filters needed

  // The filter itself
  var runFilter = function() {
    $grid.isotope({
      filter: function() {
        if (filters[0]) {
          // at least some search text was entered:
          var qsRegex = new RegExp(filters[0], 'gi');

          // if the title doesn't match, eliminate it:
          if (!$(this).find('.content-title').text().match(qsRegex)) {
            return false;
          }
        }

        if (filters[1]) {
          // a category was selected; filter out others:
          if (!($(this).hasClass(filters[1]))) {
            return false;
          }
        }

        // etcetera, for any other filters 

        // successfully passed all conditions, so:
        return true;
      }
    });
  }
});
body {
  background-color: #333642;
  margin: 0;
}

.item {
  float: left;
  width: calc(50% - 20px);
  padding: 10px;
}

.red .content {
  background-color: tomato;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
}

.blue .content {
  background-color: dodgerblue;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
}

.green .content {
  background-color: green;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
}

.comedy .content {
  background-color: #131417;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
}

.content-title {
  background-color: gray;
  border-radius: 0 0 8px 8px;
  text-align: center;
  padding: 8px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>

<div id="filters">
  Color:
  <select id="filter-select">
    <option value="">All</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="comedy">Comedy</option>
  </select><br> Title: <input type="text" class="quicksearch">
</div>

<div id="container" class="container">
  <div class="row">
    <div class="red item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>fy Title 1</h3>
      </div>
    </div>
    <div class="blue item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 2</h3>
      </div>
    </div>
    <div class="green item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 3</h3>
      </div>
    </div>
    <div class="red item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 4</h3>
      </div>
    </div>
    <div class="comedy item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 5</h3>
      </div>
    </div>
    <div class="comedy item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 6</h3>
      </div>
    </div>
    <div class="green item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 7</h3>
      </div>
    </div>
    <div class="blue item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 8</h3>
      </div>
    </div>
    <div class="green item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 9</h3>
      </div>
    </div>
    <div class="red item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 10</h3>
      </div>
    </div>
    <div class="comedy item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 11</h3>
      </div>
    </div>
    <div class="blue item">
      <div class="content mt-4">
        <h1>content</h1>
      </div>
      <div class="content-title">
        <h3>My Title 12</h3>
      </div>
    </div>
  </div>
</div>
...