ShuffleJS 无法读取 null 的属性 'textContent'

Question

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

无法读取空的属性"textContent">

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

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

HTML

<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

在您的filter函数中，element似乎已经是box类的div了。因此，不需要在element中查找类为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();