javascript - 未捕获的类型错误 : querySelector is not a function

Question

收到一个非常奇怪的 JS 错误。

我正在使用 isotope.js 通过一些过滤按钮和搜索字段来过滤项目，如 this example .

我的用例略有不同，因为我希望搜索父级中特定子元素的内容而不是整个元素。我对示例代码进行了一些编辑以满足我的需要，并将其转换为普通 JS，因此我的初始化版本如下所示:

var qsRegex;
var buttonFilter;

var iso = new Isotope('.gridListing', {
    itemSelector: '.gridItem',
    percentPosition: true,
    layoutMode: 'fitRows',
    stagger: 30,
    filter: function(itemElem) {
        var name = itemElem.querySelector('.name').textContent;
        const searchResult = qsRegex ? text.match(qsRegex) : true;
        const buttonResult = buttonFilter ? itemElem.classList.contains(buttonFilter) : true;
        return searchResult && buttonResult;
    },
    masonry: {
    columnWidth: '.grid-sizer'
  }
});

这段代码在我使用 WebPack 运行的本地环境中运行得非常好。当我编译代码并将其复制到运行 WordPress 安装的实时站点时，我收到以下错误消息。

“未捕获类型错误:itemElem.querySelector 不是函数”

我不确定什么会导致代码在本地运行良好但在实时服务器上失败。如果有人能指出我正确的方向，那将会非常有帮助。

Answer 1

)试试这个过滤器 block

filter: function(index, item) {
    var name = item.querySelector('.name').textContent;
    const searchResult = qsRegex ? text.match(qsRegex) : true;
    const buttonResult = buttonFilter ? item.classList.contains(buttonFilter) : true;
    return searchResult && buttonResult;
},