ShuffleJS 无法读取 null 的属性“textContent”

Question

我正在学习ShuffleJS以在项目中使用它，但我遇到了搜索功能的问题。当我尝试搜索我的物品时，我不断收到此错误：

无法读取 null 的属性“textContent”

我从文档中获取了搜索代码，但它似乎对我不起作用。

这是我的搜索功能的一些代码：

超文本标记语言

<section class="search">

  <div class="container">

    <div class="row">

      <div class="col-12">

        <div class="form-group">

          <input type="search" id="search" class="form-control">

        </div>

      </div>

    </div>

  </div>

</section>

<section>

  <div class="container">

    <div class="row" id="grid">

      <div class="box green" data-groups='["green"]' data-title="blue">green</div>

      <div class="box red" data-groups='["red"]' data-title="red">red</div>

      <div class="box green" data-groups='["green"]' data-title="blue">green</div>

      <div class="box red" data-groups='["red"]' data-title="red">red</div>

      <div class="box green" data-groups='["green"]' data-title="blue">green</div>

      <div class="box red" data-groups='["red"]' data-title="red">red</div>

      <div class="col-md-2 my-sizer"></div>

    </div>

  </div>

</section>

JS

const Shuffle = window.Shuffle;

const element = $('#grid');

const sizer = $('.my-sizer');

const shuffle = new Shuffle(element, {

  itemSelector: '.box',

  sizer

})

$('#search').on('keyup', (e) => {

  var searchText = e.target.value.toLowerCase();

  shuffle.filter((element, shuffle) => {

    var titleElement = element.querySelector('.box');

    var titleText = titleElement.textContent.toLowerCase().trim(); // <= this is where the error is thrown

    return titleText.indexOf(searchText) !== -1;

  });

})

我还尝试在此处复制并粘贴他们的示例 JS 文件，但我收到了上面提到的相同错误。

我还在CodePen中重现了上面写的代码！

有谁知道问题出在哪里吗？谢谢您的帮助！

Answer 1

在你的过滤函数中，它似乎element已经是一个div类了box。因此，无需在内部查找element带有 class 的元素box，因为您已经得到了它。所以你可以更换&nbsp; &nbsp; var titleElement = element.querySelector('.box');&nbsp; &nbsp; var titleText = titleElement.textContent.toLowerCase().trim(); // <= this is where the error is thrown和&nbsp; &nbsp; var titleText = element.textContent.toLowerCase().trim();