JS Class 列表不工作

Question

所以我想在我的博客上创建一个页面，其中包含我拥有 post 的游戏列表，并且我正在尝试制作一个过滤器来帮助人们根据类。我正在使用带有 onclick="myFuntion()" 的按钮，但出于某种原因我似乎无法让它工作。我对 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 对不起，如果我的格式有误 post，我是这个网站的新手。

编辑：这是我要过滤的 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>

Answer 1

测试了这段代码，它看起来可以工作，除非你想做其他事情。

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

和 here 是一个展示其工作原理的插件

也许您会根据放置在物品上的 class 来过滤物品，然后

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

还有一个plunker 编辑：删除 games_all class 检查，或者您可以添加 games_all o 列表中的每个项目，但这会更容易。

JS Class 列表不工作

JS Class List Not Working

javascript

filtering

blogger