Выберите конкретный c более глубокий фильтр изотопов класса div - PullRequest
Новая
       109

Выберите конкретный c более глубокий фильтр изотопов класса div

0 голосов
/ 26 мая 2020

Небольшое вступление: Меня зовут Алекс. Я начинал go как разработчик WordPress, но через 6 месяцев понял, что я не настоящий программист. Я дизайнер с образованием в художественной школе, и теперь я использую Webflow для создания веб-сайтов.

Я работаю над личным проектом и пытаюсь заставить Isotope работать с Webflow. Isotope настроен и почти работает ... Я не могу заставить Isotope посмотреть на нужный div / класс. Мне нужно go глубже, чем div, на который он сейчас смотрит. Если я добавлю класс (web, graphi c или видео) к .grid-элементу, он будет работать, но это не то, что мне нужно. Классы автоматически добавляются внутрь другого div, и именно там Isotope должен искать. Пожалуйста, посмотрите на мой HTML, чем вы поймете, надеюсь:)

Это мой HTML: 

<!DOCTYPE html>
<html data-wf-page="5ecc1738ef9a4b9ef96ce0d9" data-wf-site="5ecbb6f2fe4999288fed2b6e">
<head>
  <meta charset="utf-8">
  <title>Filter Test Isotope V2</title>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/filter-test-isotope-0bd68152173cc6a5df2.webflow.css" rel="stylesheet" type="text/css">
  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
  <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
  <div class="section portfolio">
    <div class="container">
      <ul role="list" class="filter">
        <li class="category"><a data-filter="*" href="#">All</a></li>
        <li class="category"><a data-filter=".web" href="#">Web design</a></li>
        <li class="category"><a data-filter=".graphic" href="#">Graphic design</a></li>
        <li class="category"><a data-filter=".video" href="#">Video</a></li>
      </ul>
    </div>
    <div class="container">
      <div class="collection-list-wrapper w-dyn-list">
        <div class="item grid w-dyn-items">
          <div class="grid-item w-dyn-item">
            <div class="w-embed"><input type="hidden" class="web"></div>
            <h1>Title</h1>
          </div>
        </div>
        <div class="w-dyn-empty">
          <div>No items found.</div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5ecbb6f2fe4999288fed2b6e" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
  <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
  <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

</body>
</html>

А это мой сценарий (который я поместил в нижний колонтитул, но для ясности я его пока вынул: 

<script>
var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});
// element argument can be a selector string
//   for an individual element
var iso = new Isotope( '.grid', {
  // options
});
// init Isotope
var $grid = $('.grid').isotope({
  // options
});
// filter items on button click
$('.filter').on( 'click', 'a', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});
</script>

Итак, мне нужно, чтобы Isotope смотрел на класс в этом div. 

<div class="w-embed"><input type="hidden" class="web"></div>

Этот класс динамически c.

Можно ли настроить таргетинг на этот div? Надеюсь, вы понимаете, что я имею в виду и какое может быть мое решение! Вам очень много!

С уважением,

zwartekoff ie

...