jQuery фильтрует сообщения по первой букве - по алфавиту - PullRequest
Новая
       20

jQuery фильтрует сообщения по первой букве - по алфавиту

0 голосов
/ 03 сентября 2018

У меня есть список продуктов, происходящих из WooCommerce, который добавляется как пользовательский пост (с использованием конструктора страниц Elementor) здесь: http://staging.morningsidepharm.com/products/generic-medicines/

Я использовал плагин, чтобы попытаться добавить алфавитный фильтр, но он не работает для меня (я думаю, потому что я отображаю продукты в виде постов), поэтому я решил использовать jquery для его создания.

Я нашел следующий код:

HTML 

<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>

<div class="spacer"></div>

<div id="parent">
  <div class="box a b">A &amp; B</div>
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

CSS 

* {
  box-sizing: border-box;
}
body {
  padding: 10px;
  background: #ecf0f1;
  font-family: helvetica, sans-serif;
  font-weight: 200;
}
.btn {
  border: none;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  margin: 5px;
}

.active {
  background: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
.box {
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  padding: 10px;
  height: 100px;
  width: calc(25% - 10px);
  float: left;
  margin: 5px;
  text-align: center;
  border-radius: 3px;
  color: #fff;
}
.spacer {
  clear: both;
  height: 20px;
}

JS 

var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $('#parent > div').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#parent > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})

Что можно увидеть в действии здесь: https://codepen.io/terf/pen/vGeqC

Кажется, это работает, потому что у каждого div есть класс a, b, c, d и т. Д.

Однако в моем случае каждый из моих контейнерных элементов div будет иметь один и тот же класс, но будет иметь уникальный заголовок h3, например: 

<div class="product"><h3>Acarbose</h3></div>
<div class="product"><h3>Bicalutamide</h3></div>
<div class="product"><h3>Capecitabine</h3></div>
<div class="product"><h3>Dapsone</h3></div>

Так что я думаю, чтобы это работало, мне нужно, чтобы jQuery прочитал первую букву h3 внутри каждого из разделов продуктов, а затем отображал соответствующие продукты только при нажатии фильтра букв.

Или, возможно, добавить название продукта в div как класс?

Я знаю, что это только отправная точка, и, возможно, есть более простой способ добиться этого, поэтому любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 03 сентября 2018

Вы получаете первую букву для поиска из id нажатой кнопки. Поэтому вы можете просто filter() .product элементы с помощью регулярного выражения, которое гарантирует, что они начинаются с этой буквы, примерно так: 

var $boxes = $('#parent > .box');

var $btns = $('.btn').click(function() {
  var id = this.id;
  if (id == 'all') {
    $boxes.fadeIn(450);
  } else {
    $boxes.fadeOut(450).filter(function() {
      var re = new RegExp('^' + id, 'i');
      return re.test($(this).text().trim());
    }).stop(true).fadeIn(450);
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})
* {
  box-sizing: border-box;
}

body {
  padding: 10px;
  background: #ecf0f1;
  font-family: helvetica, sans-serif;
  font-weight: 200;
}

.btn {
  border: none;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  margin: 5px;
}

.active {
  background: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.box {
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  padding: 10px;
  height: 100px;
  width: calc(25% - 10px);
  float: left;
  margin: 5px;
  text-align: center;
  border-radius: 3px;
  color: #fff;
}

.spacer {
  clear: both;
  height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>

<div class="spacer"></div>

<div id="parent">
  <div class="box">
    <h3>Acarbose</h3>
  </div>
  <div class="box">
    <h3>Bicalutamide</h3>
  </div>
  <div class="box">
    <h3>Capecitabine</h3>
  </div>
  <div class="box">
    <h3>Dapsone</h3>
  </div>
</div>
...