JS实现筛选末尾为rouges的li元素及列表重置排序功能咨询

核心问题修复 #

你当前用includes()会匹配所有包含rouges的文本，要限定必须在末尾，直接用JS字符串原生的endsWith()方法即可。 #

完整实现代码 #

按钮HTML示例（可根据实际ID调整）

<button id="bouton4">筛选以rouges结尾的条目</button>
<button id="resetBtn">重置并按字母排序</button>
<ul id="itemList">
  <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>

JS逻辑

// 存储过滤状态，标记是否执行过筛选
let isFiltered = false;
const listEl = document.getElementById('itemList');
// 筛选按钮逻辑，对应你原有的bouton4 ID
document.getElementById('bouton4').addEventListener('click', function() {
  const liList = listEl.querySelectorAll('li');
  liList.forEach(li => {
    // 拿到文本后去除首尾空格再判断
    const text = li.textContent.trim();
    // 仅显示以rouges结尾的条目
    li.style.display = text.endsWith('rouges') ? 'list-item' : 'none';
  });
  isFiltered = true;
});
// 重置+排序按钮逻辑
document.getElementById('resetBtn').addEventListener('click', function() {
  // 仅之前执行过过滤才执行后续操作
  if (!isFiltered) return;
  const liList = listEl.querySelectorAll('li');
  // 先恢复所有条目的显示
  liList.forEach(li => li.style.display = 'list-item');
  // 提取所有文本内容排序，用法语排序规则适配你的列表内容
  const sortedTexts = Array.from(liList)
    .map(li => li.textContent.trim())
    .sort((a, b) => a.localeCompare(b, 'fr'));
  // 把排序后的内容更新回列表
  liList.forEach((li, index) => {
    li.textContent = sortedTexts[index];
  });
  // 重置过滤状态
  isFiltered = false;
});

关键说明 #

• endsWith('rouges')会严格判断字符串是否以指定内容结尾，刚好符合你只保留Fruits rouges和Haricots rouges的需求
• 排序用localeCompare('fr')是因为你的列表内容是法语词汇，比普通的大小比较排序更符合法语字母排序规则，如果不需要可以直接替换为a > b ? 1 : -1
• 加了isFiltered状态标记，避免未过滤时点击重置按钮也触发排序逻辑

内容的提问来源于stack exchange，提问作者Juan