Javascript 切换对象的可见性或显示

我用数据过滤器对一组对象进行搜索和过滤。 JavaScript切换对象的可见性以进行搜索和过滤

我有一些标题元素，只有在选择主题时才会出现。例如，如果用户选择主题#3，则主题#3的结果应与主题#3的标题一起显示。如果我执行搜索，标题应显示“搜索结果”

我迷路的地方：画廊从所有物品和章节标题开始。在选择章节主题之前，应隐藏章节标题。我为所有可见元素设置了“过滤器”类。如果我从可见性开始：隐藏；他们从不露面。如果我不给他们可见性：隐藏；他们永远不会离开。当我需要独立于主过滤切换这些单独的元素时，我的函数显示和隐藏“全部”

这里有一个小提琴显示页面加载上的所有标题，当您键入或单击“全部”时。在这些情况下，唯一显示的标题应该是“所有结果”

JavaScript：

    $(document).ready(function () {
        //declare a global variable
        var filterVal;
        //check if sessionStorage exists and if so, if there is a var called fillTerm
        //if not, set it to a default value (all)
        if (sessionStorage && sessionStorage.getItem("filTerm")) {
            filterVal = sessionStorage.getItem("filTerm");
        } else {
            filterVal = "all";
            sessionStorage.setItem("filTerm", filterVal);
        }

        //now let's attach some interaction to our buttons
        $(".filter-button").on("click", function () {
            //get the value for our filter
            filterVal = $(this).attr("data-filter");
            //store it in the session storage
            sessionStorage.setItem("filTerm", filterVal);
            console.log(sessionStorage);
            console.log(filterVal);
            //call our view update function
            updateView();
        });

        $("#searchBtn").on("click",function(){
            filterVal = $('#searchEntry').val();
            sessionStorage.setItem("filTerm", filterVal);
            updateView();
        });

        $("#searchEntry").on("keypress",function(e){
                if (e.keyCode == 13) {
              filterVal = $('#searchEntry').val();
              sessionStorage.setItem("filTerm", filterVal);
              updateView();
            }
        });

        //this is the function that manipulates the UI
        function updateView() {
            //default situation: all is visible
            if (!filterVal || filterVal === "all") {
                $('.filter').show();
            }
                //hide all and show filtered values
            else {
                $(".filter").hide();
                $('.filter').filter('.' + filterVal).show();

                console.log("searchTerm");
                console.log("filterVal");
            }
        };
        //update the view when the page loads
        updateView();

    });

---

display

的属性规则需要在

.hidden

CSS类中编写。然而，这还不够，因为它具有特异性。您可能需要将标题包装在另一个id为的div中，以解决此问题

如果你不反对使用

！重要信息

，您有这样的解决方案

为了简洁和缺少对此处的支持，删除了sessionStorage引用

$（文档）.ready（函数（）{
var filterVal=“全部”；
$（“.filter按钮”）。在（“单击”，函数（）{
filterVal=$（this.attr（“数据过滤器”）；
updateView（）；
});
函数updateView（）{
//默认情况：全部可见
$（'.filter'）.addClass（'hidden'）；
$（'..+filterVal）.removeClass（'hidden'）；
};
updateView（）；
});
正文{
字体系列：arial；
字体大小：小；
}
.项目{
高度：60px；
宽度：50px；
填充：10px；
利润率：10px；
背景颜色：灰色；
文本对齐：居中；
颜色：白色；
溢出：包裹；
浮动：左；
}
保险商实验室{
列表样式类型：无；
左边距：-35px；
}
李{
显示：内联；
}
.过滤器按钮{
宽度：50px；
边缘底部：5px；
}
.过滤器按钮：悬停{
文字装饰：下划线；
颜色：蓝色；
光标：指针；
}
.隐藏{
显示：无！重要；
可见性：隐藏；
}



全部的


短


高的


大的


小的


许多的


很少的


全部

就那些短的

所有的高个子

只有大的

所有的小家伙

众多的

少数

高大
矮小
大大小小
高矮
大而少
大小
少而小
又矮又小又少
又大又高又多
这里有一个更新的工作代码：

摘自JSFIDLE：

//this is the function that manipulates the UI
        function updateView() {
            //default situation: all is visible
            if (!filterVal || filterVal === "all") {
                $(".filter").show();
                $(".filter").not(".all").hide();
            }

顺便说一句，我还更改了可见性：false至<代码>显示：无
我建议不要使用“.hidden”css类。而是隐藏document.ready中的所有平铺，然后在每次单击按钮时显示它们。这样对最终用户来说会有一个闪现。感谢大家的辛勤工作和帮助。Oluwafemi Sule先帮我解决了问题。我保证将来会有更多的编程问题。嗨，Oluwafemi，谢谢你的回答，我知道它是有效的，但在我的版本上不是。除了添加隐藏类，您还更改了什么？我删除了对sessionStorage的引用。看到小提琴了吗？所有东西都完好无损。啊哈，这样做还能保持会话存储吗？这是很重要的一部分，当然。我共享的小提琴保留了
会话存储
。当我单击或键入“all”时，该小提琴显示所有标题。恐怕在这种情况下，它应该只显示“所有人”的标题。嗨，萨穆尔，谢谢你的工作。你的小提琴似乎能满足我的一切要求。当我把这一行放在我的页面中你摘录的地方：$（“.filter”）.not（“.all”）.hide（）；没有对象显示。只需将代码从fiddle复制到您的页面中，页面中没有您不需要的任何额外代码。