Question

我正在尝试使用HTML，CSS和javascript在HTML网页中创建过滤器。当我单击按钮以过滤元素时，它不起作用。虽然它会改变颜色。您可以测试代码并亲自查看。如果您能帮助我，那对您真是太好了。我也从w3schools网站上获得了一些代码。

我认为HTML代码没有任何问题，因为我已经仔细检查了它，但我不确定100％正确。

↓HTML↓

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web Player</title>
    <link type="text/css" href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>
    <div id="filters">
        <button id="all" class="btn active" onclick="filterSelection('all')"> All Genres</button>
        <button id="rap" class="btn" onclick="filterSelection('rap')"> Rap</button>
        <button id="pop" class="btn" onclick="filterSelection('pop')"> Pop</button>
        <button id="other" class="btn" onclick="filterSelection('other')"> Other</button>
    </div>
    <header class="title" id="webplayertitle">
        GMusic WebPlayer
    </header>

    <div>
        <h2 id="tohi">Top-Hits</h2>
        <hr id="line">
        <div class="filtercontainer boxes">
            <div class="filterDiv rap">Lucid Dreams</div>
            <div class="filterDiv pop">Havana</div>
            <div class="filterDiv rap">Rap God</div>
            <div class="filterDiv pop">Senorita</div>
            <div class="filterDiv rap">River</div>
            <div class="filterDiv pop">Thank You, Next</div>
            <div class="filterDiv rap pop">Old Town Road</div>
            <div class="filterDiv other">Bad Guy</div>
            <div class="filterDiv pop">Sucker</div>
            <div class="filterDiv pop">Sunflower</div>
            <div class="filterDiv other">7 Rings</div>
            <div class="filterDiv rap pop">Gods plan</div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

↓CSS的重要部分↓

div.boxes {
  overflow: auto;
  white-space: nowrap;
  position: relative;
  top: 175px;
  left: 50px;
  margin-right: 100px;
}

div.boxes div {
  padding: 10px 10px;
  background-color: #202020;
  width: 120px;
  height: 120px;
  text-align: center;
  line-height: 120px;
  font-size: 16px;
  margin: 10px;
  display: inline-block;
  text-decoration: none;
  color: white;
}

body,
html {
  width: 100%;
}

body {
  overflow: auto;
}

.btn {
  transition: all 0.15s ease-in;
  text-align: center;
  background-color: rgba(255, 255, 255, 0);
  color: #202020;
  border-radius: 6px;
  display: inline-block;
  border: 2px solid black;
  padding: 14px 28px;
  font-size: 16px;
  border-color: lightsalmon;
}

.btn:hover {
  background-color: lightsalmon;
  color: white;
}

.btn.active {
  background-color: darkorange;
}

.filters {
  text-align: center;
}

#all {
  margin-right: 250px;
}

#rap {
  margin-right: 250px;
}

#pop {
  margin-right: 250px;
}

↓JavaScript的重要部分↓

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    removeClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) addClass(x[i], "show");
  }
}

function addClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function removeClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

var btnContainer = document.getElementById("filters");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

我正在尝试创建过滤器，当我单击按钮以过滤元素时，它不起作用

0 个答案: