顯示 li 包含一個特定的字符串並隱藏誰不包含

Juan 发表于 Dev

胡安

我需要隱藏每個不以“胭脂”結尾的li 。這意味著在此列表中只能顯示“Fruits rouges”和“Haricots rouges”，因為它以“rouges”結尾。此事件必須通過單擊按鈕發生，並且必須僅在 JS 中發生...

<ul>
  <li>Fruits rouges</li>
  <li>Raisins blanc</li>
  <li>Pomme verte</li>
  <li>Haricots verts</li>
  <li>Haricots rouges</li>
  <li>Rouges gorges</li>
  <li>Fruits exotiques rouges et verts</li>
</ul>

然後，僅當使用了上述過濾器時，我才需要單擊另一個按鈕來重置此列表（顯示每個 li），並按字母順序對其進行排序。

我已經嘗試通過以下方式找到匹配的單詞“胭脂”：

document.getElementById("bouton4").addEventListener("click", function(){

  const items = ['Fruits rouges', 'Raisins blanc', 'Pomme verte', 'Haricots verts', 'Haricots rouges', 'Rouges gorges', 'Fruits exotiques rouges et verts'];
  const matches = items.filter(s => s.includes('rouges'));
  console.log(matches);

});

但它沒有考慮必須在最後的“胭脂”的位置。

我希望你能幫助我做到這一點，因為我已經困惑了好幾個小時了，哈哈，非常感謝。

解碼器

您可以使用endsWith函數來獲取僅以rouges

const ul = document.querySelector("ul");
const items = [
  'Fruits rouges',
  'Raisins blanc',
  'Pomme verte',
  'Haricots verts',
  'Haricots rouges',
  'Rouges gorges',
  'Fruits exotiques rouges et verts'
];

function render(arr) {
  ul.innerHTML = "";

  arr.forEach(list => {
    const li = document.createElement("li");
    li.textContent = list;
    ul.appendChild(li);
  })
}

let isFiltered = false;
document.getElementById("bouton4").addEventListener("click", function() {
  const matches = items.filter(s => s.endsWith('rouges'));
  console.log(matches);
  render(matches);
  isFiltered = true;
});


document.querySelector("#bouton5").addEventListener("click", () => {
  if (isFiltered) {
    render([...items].sort((a, b) => a.localeCompare(b)))
  }
})

document.querySelector("#bouton6").addEventListener("click", () => {
  render(items)
})

<button id="bouton4"> filter ends with rouges</button>
<button id="bouton5"> reset with sorting</button>
<button id="bouton6"> reset </button>
<ul>
  <li>Fruits rouges</li>
  <li>Raisins blanc</li>
  <li>Pomme verte</li>
  <li>Haricots verts</li>
  <li>Haricots rouges</li>
  <li>Rouges gorges</li>
  <li>Fruits exotiques rouges et verts</li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。