如何使用Javascript筛选无序列表以仅显示选定的项目?

How do I filter an unorderded list to display only selected items using Javascript?

本文关键字：显示 项目 Javascript 何使用 筛选 无序 列表      更新时间：2023-09-26

我有这个JSFiddle，我试图使它使无序列表中的项目仅在下拉列表中选择的选项与其类匹配时才可见。列表项可以有多个类，但只要至少有一个类匹配，该项就应该是可见的。

Javascript是这样的:

function showListCategories() {
    var selection = document.getElementById("listDisplayer").selectedIndex;
    var unHidden = document.getElementsByClassName(selection);
    for (var i = 0; i < unHidden.length; i++) {
        unHidden[i].style.display = 'visible';
    }
};

这个想法是，它从下拉菜单中获取当前选择，基于匹配的类创建一个数组，然后循环遍历每个项目，并将每个项目的CSS设置为隐藏。

然而，它不起作用。谁能告诉我我哪里错了?

注意，我还没有编码"show all"选项。我想一旦我解决了第一个问题，我可能就能解决这个问题了。

在您的fiddle更改加载脚本No wrap - in <head> .

只要像下面这样改变你的函数

function showListCategories() {
    var lis = document.getElementsByTagName('li'); 
    for (var i = 0; i < lis.length; i++) {
        lis[i].style.display = 'none';
    }
   //above code to reset all lis if they are already shown
    var selection = document.getElementById("listDisplayer").value;
    lis = document.getElementsByClassName(selection);
    for (var i = 0; i < lis.length; i++) {
        lis[i].style.display = 'block';
    }
};

在css中应该是none而不是hidden 

.cats, .rats, .bats {
    display: none;
}

如果要在选择showAll时显示所有li，则在所有列表中添加all类

您有几件事情正在进行。首先，您的提琴没有正确设置，如果您打开控制台，您将看到:

Uncaught ReferenceError: showListCategories is not defined

这意味着在您附加事件时该函数不存在，或者该函数超出了作用域，因为默认情况下jsFiddle会将您的代码包装在onLoad事件中。要解决这个问题，您需要将脚本加载为No wrap - in <body>。

第二，在CSS中没有display:visible属性。你想要切换的属性是display:none和display:list-item，因为这是<li>元素的默认样式。

现在，为了使这个工作，如果您为所有项目添加一个公共类，让我们说item，这样您就可以隐藏它们，并通过检查它是否具有特定类来显示您想要的那个，而不是多次查询DOM。你应该缓存你的选择器，没有必要每次调用函数都进行查询:

var select = document.getElementById('listDisplayer');
var items = document.getElementsByClassName('item');
function showListCategories() {
    var selection = select.options[select.selectedIndex].value;
    for (var i=0; i<items.length; i++) {
        if (items[i].className.indexOf(selection) > -1) {
            items[i].style.display = 'list-item';
        } else {
            items[i].style.display = 'none';
        }
    }
}
演示:

http://jsfiddle.net/E2DKh/28/

首先在Css中没有像display:hidden;这样的属性它应该是display: none;

这是解决方案，请不要我是通过目标id完成

Js函数

    var selection = document.getElementById("listDisplayer");
var list = document.getElementsByTagName('li');
selection.onchange = function () {
    var value = selection.options[selection.selectedIndex].value; // to get Value
    for (var i = 0; i < list.length; i++) {
        if (list[i].className.indexOf(value) > -1) {
            list[i].style.display = "list-item";
        } else {
            list[i].style.display = "none"
        }
    }
}

css代码
    .cats, .rats, .bats {
    display: none;
}

JSFIDDLE

您的代码中有很多错误，jsFiddle中的设置也有错误。下面是一个工作版本，它也实现了"all"选项:

工作演示:http://jsfiddle.net/jfriend00/5Efc5/

function applyToList(list, fn) {
    for (var i = 0; i < list.length; i++) {
        fn(list[i], list);
    }
}
function hide(list) {
    applyToList(list, function(item) {
        item.style.display = "none";
    });
}
function show(list) {
    applyToList(list, function(item) {
        item.style.display = "block";
    });
}
function showListCategories() {
    var value = document.getElementById("listDisplayer").value;
    var itemList = document.getElementById("itemList");
    var items = itemList.getElementsByTagName("li");
    if (value === "all") {
        show(items);
    } else {
        // hide all items by default
        hide(items);
        show(itemList.getElementsByClassName(value));
    }
}

更改:

  1. 您必须获取选择的.value，以查看所选选项的值。您使用的selectedIndex只是一个数字。
  2. 仅显示一组对象的常用技术是隐藏所有对象，然后只显示您想要的对象。因为浏览器在整个操作中只做一次重绘，所以这在视觉上仍然是无缝的。
  3. 在查找与类匹配的项时，应该只搜索<ul>，而不是整个文档。我添加了一个id到<ul>标签，所以它可以找到，然后搜索。
    4. 为了保存代码，我添加了一些实用程序函数来操作HTMLCollection或nodeList。
  4. 测试"all"选项，如果选中该选项，则显示所有选项
  5. 将jsFiddle更改为Head选项，以便代码在全局作用域中可用，以便HTML可以找到更改处理程序函数。
  6. 切换样式设置为"block"和"none"，因为"visible"不是style.display的有效设置。
相关文章：