Изотопная фильтрация - удалите стили, чтобы использовать мои css - PullRequest
Новая
       18

Изотопная фильтрация - удалите стили, чтобы использовать мои css

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

Я пытаюсь использовать изотопную фильтрацию (https://isotope.metafizzy.co/) для нескольких делений. Он фильтрует правильно, но я хочу, чтобы стилизация исходила исключительно из моего CSS, с четырьмя разделителями, как это было до внедрения изотопа. После реализации изотопа элементы div накладываются друг на друга и намного меньше, чем должны быть. Я уже изменил соответствующий CSS и не могу найти стиль в JavaScript. Я что-то упускаю из виду?

Сайт: https://www.exploreloudoncounty.com/explore/ Как должны выглядеть div'ы: https://www.exploreloudoncounty.com/explore/index_yes.shtml

HTML: 

<p><input type="text" id="quicksearch" placeholder="Search" /></p>

<div id="filters" class="button-group">
  <button class="btn is-checked" data-filter="*">show all</button>
  <button class="btn" data-filter=".green">Greenback</button>
  <button class="btn" data-filter=".lc">Lenoir City</button>
  <button class="btn" data-filter=".loudon">Loudon</button>
  <button class="btn" data-filter=".phil">Philadelphia</button>
  <button class="btn" data-filter=".tell">Tellico Village</button>
</div>

<div class="busicardscont">
        <div class="busicards lc "><a href="/explore/lcrr">
            <img src="/explore/lcrr/favicon.png">
            <hr>
            <h3>American Log Cabin Restoration<span class="hidden">lc const house construction</span></h3>
            <p id="hourslog"></p></a>
            <p><a href="tel:+18655672190">(865) 567-2190</a></p>
            <a href="/explore/lcrr"><aside class="busiweblink"><p>VISIT PAGE</p></aside></a>
        </div>

        <div class="busicards lou"><a href="https://www.exploreloudoncounty.com/explore/massagestudiotn">
            <img src="https://www.exploreloudoncounty.com/explore/massagestudiotn/ms.png">
            <hr>
            <h3>The Massage Studio<span class="hidden">key words</span></h3>
            <p id="hoursmassage"></p></a>
            <p><a href="tel:+18657225769">(865) 722-5769</a></p>
            <a href="https://www.exploreloudoncounty.com/explore/massagestudiotn"><aside class="busiweblink"><p>VISIT PAGE</p></aside></a>
        </div>

        <div class="busicards lou"><a href="https://www.exploreloudoncounty.com/explore/purdys">
            <img src="https://www.exploreloudoncounty.com/explore/purdys/purdyoem.jpg">
            <hr>
            <h3>Purdy's Powersports<span class="hidden">motorcycle bike atv dirt motocross</span></h3>
            <p id="hourspurdy"></p></a>
            <p><a href="tel:+18654087315">(865) 408-7315</a></p>
            <a href="https://www.exploreloudoncounty.com/explore/purdys"><aside class="busiweblink"><p>VISIT PAGE</p></aside></a>
        </div>
</div>

JS: 

<script language="javascript">
// quick search regex
var qsRegex;
var buttonFilter;

// init Isotope
var $busicardscont = $(".busicardscont").isotope({
  itemSelector: ".busicards",
  layoutMode: 'masonry',
  filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
    var buttonResult = buttonFilter ? $this.is(buttonFilter) : true;
    return searchResult && buttonResult;
  }
});

$("#filters").on("click", "button", function() {
  buttonFilter = $(this).attr("data-filter");
  $busicardscont.isotope();
});

// use value of search field to filter
var $quicksearch = $("#quicksearch").keyup(
  debounce(function() {
    qsRegex = new RegExp($quicksearch.val(), "gi");
    $busicardscont.isotope();
  })
);

// change is-checked class on buttons
$(".button-group").each(function(i, buttonGroup) {
  var $buttonGroup = $(buttonGroup);
  $buttonGroup.on("click", "button", function() {
    $buttonGroup.find(".is-checked").removeClass("is-checked");
    $(this).addClass("is-checked");
  });
});

// debounce so filtering doesn't happen every millisecond
function debounce(fn, threshold) {
  var timeout;
  threshold = threshold || 100;
  return function debounced() {
    clearTimeout(timeout);
    var args = arguments;
    var _this = this;
    function delayed() {
      fn.apply(_this, args);
    }
    timeout = setTimeout(delayed, threshold);
  };
}
</script>

CSS: 

.busicardscont {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    border: 0px;
    margin-top: 4em;
}
        .busicards {
            width: 10%;
            flex: 0 0 21%;
            margin: 0 0 2rem 2rem;
            text-decoration: none;
            background-color: #fff;
            -moz-box-shadow: 0 0 10px #DFDFDF;
            -webkit-box-shadow: 0 0 10px #DFDFDF;
            box-shadow: 0 0 10px #DFDFDF;
            height: 100%;
            min-height: 100%;
        }
...