Question

我有this 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”选项。我想，一旦我解决了第一个问题，我就可能能够解决这个问题。

Answer 1

在你的小提琴改变加载脚本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;
}

如果您想在选择li时显示所有showAll，请向所有lis添加all个类。

Answer 2

你有一些事情在发生。首先，你的小提琴设置不正确，如果你打开控制台，你会看到：

未捕获的ReferenceError：未定义showListCategories

这意味着函数在您附加事件时不存在或函数超出范围，因为默认情况下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/

Answer 3

你的代码中有很多错误，而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));
    }
}

所做的更改：

您必须获取select的.value以查看所选内容的值。您使用的selectedIndex只是一个数字。
仅显示一组对象的常用技巧是隐藏所有对象，然后只显示您想要的对象。由于浏览器只对整个操作进行了一次重绘，因此它仍然是视觉上无缝的。
找到与您的课程匹配的项目时，您应该只搜索<ul>，而不是整个文档。我在<ul>标记中添加了一个ID，以便找到并搜索。
为了保存代码，我添加了一些实用程序函数，用于在HTMLCollection或nodeList上进行操作。
测试“所有”选项，如果选中，则显示所有选项
将jsFiddle更改为Head选项，以便代码在全局范围内可用，以便HTML可以找到您的更改处理函数。
将样式设置切换为"block"和"none"，因为"visible"不是style.display的有效设置。

Answer 4

首先，像display:hidden;这样的Css中没有属性，它应该是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

如何过滤无序列表以使用Javascript仅显示所选项目？

4 个答案: