Question

我有一个简单的基本过滤器<ul class="list">，默认情况下隐藏所有<li class="item">个元素。我的过滤器旁边是框，每个框都有一个项目列表。它们是从数据库中获取的，如下所示：

<p class="item-list">Apples, Oranges, Bananas</p>

我今天花了一些时间试图找出解决方案，但我无法让它发挥作用。这就是我所拥有的：

if ( $("p.item-list").is(":contains('Apples')")) {
    $(".list li.item:nth-child(1)").show();
} else if ( $("p.item-list").is(":contains('Oranges')")){
    $(".list li.item:nth-child(2)").show();
} else if ( $("p.item-list").is(":contains('Bananas')")){
    $(".list li.item:nth-child(3)").show();
} else if ( $("p.item-list").is(":contains('Berries')")){
    $(".list li.item:nth-child(4)").show();
}

我想当第一个“如果”匹配它停止，所以我的方法是错误的。我想不出一个解决方案 - 实际上我可以，但我的编码技巧有限：（

有人可以帮帮我吗？

Answer 1

我想你想展示与一系列单词相对应的li个元素。我假设您的代码格式不正确，并且您希望显示所有匹配而不是第一次匹配。

为此，您可以通过创建与可能显示的每个li对应的单词列表来简化。然后在循环（或.forEach()）中，如果在文本中找到当前单词，则会显示该单词索引的li。

这是一个没有jQuery的解决方案。

＆＃13;

var text = document.querySelector("p.item-list").textContent;
var items = document.querySelectorAll(".list li.item");
var search_words = [
  "Apples", "Oranges", "Bananas", "Berries"
];

search_words.forEach((word, i) => {
  if (text.includes(word)) {
    items[i].classList.add("show");
  }
});

＆＃13;

.list li.item {
  display: none;
}

.list li.item.show {
  display: block;
}

＆＃13;

<p class="item-list">Apples, Oranges, Bananas</p>

<ul class="list">
  <li class=item>APPLES
  <li class=item>ORANGES
  <li class=item>BANANAS
  <li class=item>BERRIES
</ul>

＆＃13;

检查元素是否具有特定值，然后修改另一个元素

1 个答案: