替代包含选择器

Question

我有一个车型列表，想显示相关的车型。作为选择器，我在数据字段中编写了类型。现在我想用 class d-none 隐藏所有与选择不匹配的列表项。

这适用于我当前的代码。问题是我在这个例子中也显示了“Example Type 3”。但我只想有“示例类型 2”。

如何才能让这里只显示第二个元素，但我仍然可以搜索“E-Tron S”或“E-Tron GT”？

我的 javascript 到目前为止：

    let searchText = "E-Tron";

containerItems = contentContainer.querySelectorAll('li[data-custom-field-filter-name^="Typ"]:not([data-custom-field-model*="' + searchText + '"])');

containerItems.forEach(function (el) {
    el.classList.add('d-none');
});

html 列表

<ul class="container">
<li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model=" Q5">
  <a href="#"><button> Example Type 1 </button></a>
</li>
<li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model=" E-Tron">
  <a href="#"><button> Example Type 2 </button></a>
</li>
<li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model="  E-Tron S| E-Tron GT">
  <a href="#"><button> Example Type 3 </button></a>
</li>
</ul>

Answer 1

选择器中没有精确的文本匹配或正则表达式，因此您需要在不使用包含选择器的情况下进行过滤。

const searchText = "E-Tron";

const allLis = document.querySelectorAll('li[data-custom-field-filter-name="Typ"]');

var regex = new RegExp("\b" + searchText + "($|\|)");
allLis.forEach(x => {
  if(!regex.test(x.dataset.customFieldModel)) {
     x.classList.add("d-none");
  }
});

.d-none {
  display: none;
}

<ul class="container">
<li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model=" Q5">
  <a href="#"><button> Example Type 1 </button></a>
</li>
<li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model=" E-Tron">
  <a href="#"><button> Example Type 2 </button></a>
</li>
<li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model="  E-Tron S| E-Tron GT">
  <a href="#"><button> Example Type 3 </button></a>
</li>
</ul>

替代包含选择器

Alternative to the contains selector

javascript

selector