Javascript JS类列表不工作

所以我尝试在我的博客上创建一个页面，上面有我发布的游戏列表，我尝试创建一个过滤器，帮助人们根据类查找游戏。我正在使用onclick=“MyFunction（）”按钮，但由于某些原因，我似乎无法让它工作。我对js很生疏，但我认为逻辑是合理的，应该可以工作

java脚本

function allFunction() {
    var filter = document.getElementById("game_filter");

    if (filter.classList.contains("games_all")) {
        element.classList.toggle("game_filter_show", true);
        element.classList.toggle("game_filter_hide", false);
    }
}

function fpsFunction() {
    var filter = document.getElementById("game_filter");

    if (filter.classList.contains("games_fps")) {
        element.classList.toggle("game_filter_show", true);
        element.classList.toggle("game_filter_hide", false);
    } else {
        element.classList.toggle("game_filter_show", false);
        element.classList.toggle("game_filter_hide", true);
    }
}

function survivalFunction() {
    var filter = document.getElementById("game_filter") {

    if (filter.classList.contains("games_survival")) {
        element.classList.toggle("game_filter_show", true);
        element.classList.toggle("game_filter_hide", false); 
    } else {
        element.classList.toggle("game_filter_show", false);
        element.classList.toggle("game_filter_hide", true);
    }
}

据我所知，这应该是工作，但它不是，我打算放弃，只是离开了过滤器，如果我不能很快弄明白这一点

PS对不起，如果我把这篇文章的格式弄错了，我是这个网站的新手

编辑：下面是我试图筛选的HTML项目之一

<div class="separator" 
id="game_filter"
class="game_filter_show"
class="games_all" 
class="games_fps" 
style="clear: both; text-align: center;">
<a class="GameList" href="http://foo.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://foo.png /></a></div>

下面是按钮的html

<div style="text-align: center;">
<span style="font-size: large;">
<button onclick="allFunction()">All Games</button>
<button onclick="fpsFunction()">First Person Shooters</button>
<button onclick="survivalFunction()">Survival Games</button>
</span></div>

所有游戏
第一人称射击运动员
生存游戏

测试了这段代码，它看起来很有效，除非您想做其他事情

    <div class="games_survival" id="game_filter"></div>
    <div id="element"></div>

    <div onclick="allFunction()">all</div>
    <div onclick="fpsFunction()">fps</div>
    <div onclick="survivalFunction()">survivval</div>

<script>
var element = document.getElementById("element");
function allFunction() {
    var filter = document.getElementById("game_filter");

    if (filter.classList.contains("games_all")) {
        element.classList.toggle("game_filter_show", true);
        element.classList.toggle("game_filter_hide", false);
    }
}

function fpsFunction() {
    var filter = document.getElementById("game_filter");

    if (filter.classList.contains("games_fps")) {
        element.classList.toggle("game_filter_show", true);
        element.classList.toggle("game_filter_hide", false);
    } else {
        element.classList.toggle("game_filter_show", false);
        element.classList.toggle("game_filter_hide", true);
    }
}

function survivalFunction() {
    var filter = document.getElementById("game_filter") ;

    if (filter.classList.contains("games_survival")) {
        element.classList.toggle("game_filter_show", true);
        element.classList.toggle("game_filter_hide", false); 
    } else {
        element.classList.toggle("game_filter_show", false);
        element.classList.toggle("game_filter_hide", true);
    }
}
</script>

全部的
fps
生存
var element=document.getElementById（“元素”）；
函数allFunction（）{
var filter=document.getElementById（“game_filter”）；
if（filter.classList.contains（“games_all”））{
element.classList.toggle（“game\u filter\u show”，true）；
元素.classList.toggle（“game\u filter\u hide”，false）；
}
}
函数fpsFunction（）{
var filter=document.getElementById（“game_filter”）；
if（filter.classList.contains（“games\u fps”））{
element.classList.toggle（“game\u filter\u show”，true）；
元素.classList.toggle（“game\u filter\u hide”，false）；
}否则{
element.classList.toggle（“game\u filter\u show”，false）；
element.classList.toggle（“game\u filter\u hide”，true）；
}
}
函数survival函数（）{
var filter=document.getElementById（“game_filter”）；
if（filter.classList.contains（“游戏生存”））{
element.classList.toggle（“game\u filter\u show”，true）；
元素.classList.toggle（“game\u filter\u hide”，false）；
}否则{
element.classList.toggle（“game\u filter\u show”，false）；
element.classList.toggle（“game\u filter\u hide”，true）；
}
}

这是一个用来展示它是如何工作的

也许您根据放置在项目上的类筛选项目，然后

   <style>
  .game_filter_show {color: red; } 
  .game_filter_hide{background-color: blue;}
  </style>

    <div class="element games_survival">text in here1</div>
    <div class="element games_fps">text in here2</div>

    <div onclick="allFunction()">all</div>
    <div onclick="fpsFunction()">fps</div>
    <div onclick="survivalFunction()">survivval</div>

<script>
function allFunction() {
var elements = document.getElementsByClassName("element");

      elements = Array.prototype.slice.call(elements,0);
    elements.map(function(element){
          element.classList.toggle("game_filter_show", true);
          element.classList.toggle("game_filter_hide", false);
    })
}

function fpsFunction() {
var elements = document.getElementsByClassName("element");
      elements = Array.prototype.slice.call(elements,0);
    elements.map(function(element){
      if (element.classList.contains("games_fps")) {
        element.classList.toggle("game_filter_show", true);
        element.classList.toggle("game_filter_hide", false);
    } else {
        element.classList.toggle("game_filter_show", false);
        element.classList.toggle("game_filter_hide", true);
    }    
    })
}

function survivalFunction() {
var elements = document.getElementsByClassName("element");
      elements = Array.prototype.slice.call(elements,0);
    elements.map(function(element){
      if (element.classList.contains("games_survival")) {
        element.classList.toggle("game_filter_show", true);
        element.classList.toggle("game_filter_hide", false); 
    } else {
        element.classList.toggle("game_filter_show", false);
        element.classList.toggle("game_filter_hide", true);
    } 
    })
}
</script>

.game_filter_show{颜色：红色；}
.game_filter_hide{背景色：蓝色；}
此处的文本1
此处的文本2
全部的
fps
生存
函数allFunction（）{
var elements=document.getElementsByClassName（“元素”）；
elements=Array.prototype.slice.call（elements，0）；
elements.map（函数（元素）{
element.classList.toggle（“game\u filter\u show”，true）；
元素.classList.toggle（“game\u filter\u hide”，false）；
})
}
函数fpsFunction（）{
var elements=document.getElementsByClassName（“元素”）；
elements=Array.prototype.slice.call（elements，0）；
elements.map（函数（元素）{
if（element.classList.contains（“games\u fps”））{
element.classList.toggle（“game\u filter\u show”，true）；
元素.classList.toggle（“game\u filter\u hide”，false）；
}否则{
element.classList.toggle（“game\u filter\u show”，false）；
element.classList.toggle（“game\u filter\u hide”，true）；
}    
})
}
函数survival函数（）{
var elements=document.getElementsByClassName（“元素”）；
elements=Array.prototype.slice.call（elements，0）；
elements.map（函数（元素）{
if（element.classList.contains（“游戏生存”））{
element.classList.toggle（“game\u filter\u show”，true）；
元素.classList.toggle（“game\u filter\u hide”，false）；
}否则{
element.classList.toggle（“game\u filter\u show”，false）；
element.classList.toggle（“game\u filter\u hide”，true）；
} 
})
}

还有一个

---

编辑：删除games\u all类检查，或者您可以将games\u all添加到列表中的每个项目，但这会更简单

“element”没有声明，在最后一个var filter=document.getElementById（“game_filter”）{中有一个额外的“{”。您能提供如何设置过滤器元素上的类吗？@kodvin这里是过滤器列表上的一个项。一个元素的所有类都应该放在一个属性（）类中=“分隔符游戏\过滤器\显示游戏\所有游戏\ fps”就像我说的，element.classList.toggle中没有“元素”定义（“游戏\过滤器\隐藏”，true）；我怀疑你有多个元素具有相同的IDP请看第二个plunker，如果它不是你想要的，你应该尝试重新表述你希望过滤工作的内容和方式这第二个就是我正在尝试做的。我将样式更改为display:block和display:none，它工作起来很有魅力。问题是当我点击所有按钮，它应该让所有的div都显示出来，但什么也没有发生。class=“blue”是什么意思？哦，对不起，它是用来测试的。如果要删除iTunes更新答案和第二个plunker，你应该要么删除“games\u all”"检查或将该类添加到每个元素。我希望它能帮助Sok，因此我使用了第二个代码的新版本。它与您编写的方式一样工作正常，但当我在我的博客上实现它时，它根本不起作用。更新：我没有将您的代码应用到我已经拥有的代码上，而是将其废弃，并从零开始，以基础和it为例另一方面，我想知道你是否有什么想法，一旦我开始对链接进行评级，我可以自动对链接进行排序，这样评级越高，链接就越接近顶部。