单击按钮时的 Jquery 筛选器列表

Question

我有一个学生档案，每个学生都有不同的电子邮件地址。

我的目的是用按钮过滤某个电子邮件提供商。

就像学生有一个来自谷歌的电子邮件地址一样，我想过滤/显示每个在谷歌有电子邮件地址的学生。

我的脚本在分页和搜索功能中运行顺利，但过滤功能仍然存在问题，这让我有些头疼。

这是主要的过滤功能：

function filterSelection(c) {
var x, i;
hideAll();
var new_results = document.getElementsbyClassName(c);
   new_results.addClass("result");
   displayRange(0, itemTotal);
}

..这是基于W3Schoolsdiv隐藏和显示。

我有一个触发此功能的按钮：

  <button class="btn active" onclick="filterSelection('google')"> Show all</button>

有人可以帮助我解决这个问题吗？

这是我的代码笔的链接：https://codepen.io/user1010/pen/omxqRz?editors=1010

Answer 1

addClass（） 是一个 jQuery 方法，所以你必须通过 jQuery 对象。以下应该有效。

function filterSelection(c) {
    hideAll();
    // Find all elements with the 'c' class: $('.'+c)
    $('.'+c).addClass("result"); 
    displayRange(0, itemTotal);
}

Answer 2

如果您要

解释电子邮件并将其用作类，就像您似乎正在做的那样：

function filterSelection(emailclass){
    if('all') { 
        showAll() 
    } else {
        hideAll()
        $("."+emailclass).closest("li").show()
    }
}
filterSelection('google')

但可以省去完全添加类的麻烦......

function filterSelection(emailpart){
    if('all') { 
        showAll() 
    } else {
        hideAll()
        $("span:contains(emailpart)").closest("li").show()
   }
}
filterSelection('@gmail.com')