Javascript Jquery移动过滤系统,can';不要隐藏多个div

Javascript Jquery移动过滤系统,can';不要隐藏多个div,javascript,jquery,html,jquery-mobile,filter,Javascript,Jquery,Html,Jquery Mobile,Filter,我正在制作一个Jquery移动应用程序,页面上有15个左右的div和class',我正在尝试制作一个过滤系统,这样当你按下一个按钮时,这些div中的一些会根据类的不同而消失。共有3组,他们都有一个“all”类来显示所有内容,总共4个类 不幸的是,我使用的大多数js都不起作用,即使我为jquery mobile设置了一个JSFIDLE,但当我把它放到我的应用程序中时,它似乎不起作用 我想用 function show(target) { document.getElementsByClas

我正在制作一个Jquery移动应用程序,页面上有15个左右的div和class',我正在尝试制作一个过滤系统,这样当你按下一个按钮时,这些div中的一些会根据类的不同而消失。共有3组,他们都有一个“all”类来显示所有内容,总共4个类

不幸的是,我使用的大多数js都不起作用,即使我为jquery mobile设置了一个JSFIDLE,但当我把它放到我的应用程序中时,它似乎不起作用

我想用

function show(target) {
    document.getElementsByClassName(target).style.display = 'block';
    }
function hide(target) {
    document.getElementsByClassName(target).style.display = 'none';
    }
但这不起作用,而
document.getElementById
似乎可以正常工作。然而,很明显,我只能隐藏/显示每个按钮1个div

我想知道是否有一个工作,这或完全不同的东西,我应该尝试

以下是我所拥有的一部分:
它在JSFIDLE中完全被破坏了,但在我的代码中运行良好,这很奇怪。

getElementsByClassName
返回一个元素数组。因此,您必须对数组进行排序,然后在每个数组上设置display属性。因为您已经在使用jQuery,所以可以使用它对所有元素进行查询

function show(target) {
    /* jQuery uses CSS selectors to grab elements
       so we have to prefix the target with "."
       Alternativley we could pass in the whole selector in the
       function so we don't have to prefix it e.g.
       show('.all')
       $(target).show();
    */
    $("."+target).show();
}
function hide(target) {
    $("."+target).hide();
}    
下面是vanilla js框架中的相同实现

function show(target) {
    var elements = document.getElementsByClassName(target);
    elements.forEach(function(element){element.style.display = 'block';});
    }
function hide(target) {
    var elements = document.getElementsByClassName(target);
    elements.forEach(function(element){element.style.display = 'none';});
    }

请注意,
getElementById
返回单个元素,因为id是唯一的,页面上应该只有一个元素具有一个id。这就是为什么它对您有效。

您不需要单独的
隐藏
-
显示功能。以下内容将解决所有问题

$('a').on("click",function()
{
   $("#scroll_content div").hide(); // initially hide all divs inside the element with id = scroll_content
   var target = $(this).text().toLowerCase(); // find the class you wish to show using the text of the a tag clicked ( I would prefer using data-attr in this case but I'll leave the choice upto you.
     $("." + target).show(); // show the element with the class target.
});

工作示例:

谢谢,这正是我想要的。然而,它似乎只在JSFIDLE中的代码中不起作用,我可以有一个不同的版本吗?我js中的所有文件,如果它有助于识别版本..您可能缺少document.ready来定义事件委派。当然很乐意帮忙:)