Question

我正在尝试使用class =“data-groups”过滤从数据库获取的数据。

以下是代码：

this.shuffle.filter(function(element, shuffle) {

    // If there is a current filter applied, ignore elements that don't match it.
    if (shuffle.group !== Shuffle.ALL_ITEMS) {
      // Get the item's groups.
      var groups = JSON.parse(element.getAttribute('data-groups'));
      var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;

      // Only search elements in the current group
      if (!isElementInCurrentGroup) {
        return false;
      }
    }

    var titleElement = element.querySelector('.book-item_title');
    var titleText = titleElement.textContent.toLowerCase().trim();

    return titleText.indexOf(searchText) !== -1;
  });
};

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="grid-shuffle">
  <ul id="grid" class="row">
    @foreach($libraries as $library)

    <li class="book-item small-12 medium-6 columns" data-groups='["{{$library->genre}}"]' data-date-created='{{$library->published}}' data-title='{{ $library->title }}' data-color='{{$library->color}}'>
      <div class="bk-img">
        <div class="bk-wrapper">
          <div class="bk-book bk-bookdefault">
            <div class="bk-front">
              <div class="bk-cover" style="background-image: url('img/001-small.png')"></div>
            </div>
            <div class="bk-back"></div>
            <div class="bk-left"></div>
          </div>
        </div>
      </div>
      <div class="item-details">
        <h3 class="book-item_title">{{$library->title}}</h3>
        <p class="author">{{$library->author}} &bull; {{$library->published}}</p>
        <p>{{$library->synopsis}}</p>
        <a href="#" class="button ">Details</a>
      </div>

      <div class="overlay-details">
        <a href="#" class="close-overlay-btn">Close</a>
        <div class="overlay-image">
          <img src="img/001.jpg" alt="Book Cover">
          <div class="back-color"></div>
        </div>
        <div class="overlay-desc activated">
          <h2 class="overlay_title">{{$library->title}}</h2>
          <p class="author">by {{$library->author}}</p>
          <p class="published">{{$library->published}}</p>
          <p class="synopsis">{{ $library->synopsis }}</p>
          <a href="#" class="button preview">Preview</a>
        </div>
        <div class="overlay-preview">
          <a href="#" class="back-preview-btn">Back</a>
          <h4 class="preview-title">Preview</h4>
          <div class="preview-content">
            <h5>Chapter 1</h5>
            <p>{{$library->details}}</p>
          </div>
        </div>
      </div>
    </li>
    @endforeach
  </ul>
</div>

问题是它不起作用，除非我像这样硬编码类型

data-groups='["fiction"]'

现在，由于我使用foreach循环从数据库中检索数据，这意味着无论数据库分配的类型如何，数据库中的任何书籍都会自动获得“虚构”属性。

如何解决这个问题的任何帮助将不胜感激。

Answer 1

发现问题 我用这行代码过滤

＆＃13;

<a href="#" class="filter-item active" data-group="all">All Categories</a>
<a href="#" class="filter-item" data-group="fantasy">Fantasy</a>
<a href="#" class="filter-item" data-group="sci-fi">Sci-Fi</a>
<a href="#" class="filter-item" data-group="classic">Classics</a>
<a href="#" class="filter-item" data-group="fairy">Fairy Tale</a>

＆＃13;

问题是数据组项区分大小写。因此，例如我使用＆＃34; classic＆＃34;而我的数据库正在提供＆＃34; Classic＆＃34;因此使滤波器功能看起来有问题。

由于laravel blade花括号“{{}}”，无法从数据库中过滤数据

1 个答案: