如何使用Javascript篩選無序列表以僅顯示所選項目？

Question

我在此嘗試創建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隱藏在每個項目上。

但是，它不起作用。 誰能告訴我我要去哪里？

請注意，我尚未編碼“全部顯示”選項。 我想一旦解決了第一個問題，我也許就能弄清楚。

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;
}

如果要在選擇showAll時顯示所有li ，請將all類添加到所有lis。

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中的設置卻有錯誤。 這是一個可以實現“全部”選項的工作版本：

工作演示： 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));
    }
}

所做的更改：

您必須獲取選擇的.value才能查看所選擇的選項的值。 您正在使用selectedIndex ，它只是一個數字。
僅顯示一組對象的一種常見技術是隱藏所有對象，然后僅顯示所需的對象。 由於瀏覽器僅對整個操作進行一次重繪，因此在視覺上仍然是無縫的。
當找到與您的班級相匹配的項目時，您應該只搜索<ul>而不是整個文檔。 我在該<ul>標記中添加了一個id，以便可以找到它然后進行搜索。
為了節省代碼，我添加了一些實用程序函數來對HTMLCollection或nodeList進行操作。
測試“所有”選項，並顯示所有選項（如果已選擇）
將jsFiddle更改為Head選項，以便代碼在全局范圍內可用，因此HTML可以找到您的更改處理函數。
將樣式設置切換為"block"和"none"因為"visible"不是style.display的有效設置。

Answer 4

首先，Css中沒有諸如display:hidden;類的屬性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

如何使用Javascript篩選無序列表以僅顯示所選項目？

問題描述

4 個解決方案

解決方案1
3 已采納 2014-08-03 09:09:01

解決方案2
2 2014-08-03 09:14:18

解決方案3
1 2014-08-03 09:22:13

解決方案4
1 2014-08-03 09:27:04

如何使用Javascript篩選無序列表以僅顯示所選項目？

問題描述

4 個解決方案

解決方案1 3 已采納 2014-08-03 09:09:01

解決方案2 2 2014-08-03 09:14:18

解決方案3 1 2014-08-03 09:22:13

解決方案4 1 2014-08-03 09:27:04

解決方案1
3 已采納 2014-08-03 09:09:01

解決方案2
2 2014-08-03 09:14:18

解決方案3
1 2014-08-03 09:22:13

解決方案4
1 2014-08-03 09:27:04