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>JSconst 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，因为您已经得到了它。

所以你可以更换

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

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

和

    var titleText = element.textContent.toLowerCase().trim();