运行图像组合过滤器引导代码时 Javascript 出现问题

Question

Hello i took the code from bootstrap for image portfolio filter您好，我从引导程序中获取了图像组合过滤器的代码

This code has 4 Filter buttons [ Show all, Nature, Cars, People ].此代码有 4 个过滤器按钮 [显示全部、自然、汽车、人]。 Now i wanted to add more filter buttons i added 2 buttons Namely [ Animals and Tribals ].现在我想添加更多过滤器按钮，我添加了 2 个按钮，即 [动物和部落]。 Now i will write the code that i have used below on running the code and clicking the buttons Animals and Tribals The filter results of Cars is shown.现在我将编写我在下面运行代码并单击按钮 Animals 和 Tribals 时使用的代码。显示 Cars 的过滤结果。

Please correct my script.请更正我的脚本。 Also i wanted to add 16 filters so how can this script be modified to use for that purpose.我还想添加 16 个过滤器，因此如何修改此脚本以用于该目的。 Thanks谢谢

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}
</style>
</head>
<body>

<!-- MAIN (Center website) -->
<div class="main">

<h1>MYLOGO.COM</h1>
<hr>

<h2>PORTFOLIO</h2>

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('nature')"> Nature</button>
  <button class="btn" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn" onclick="filterSelection('people')"> People</button>
  <button class="btn" onclick="filterSelection('cars')"> Animals</button>
  <button class="btn" onclick="filterSelection('cars')"> Tribals</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column nature">
    <div class="content">
      <img src="https://drive.google.com/uc?export=view&id=19EzpAuz8LCYDABdPQ9Qe-RMVU1uLzHo0" alt="Mountains" style="width:100%">
      <h4>Mountains</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="https://drive.google.com/uc?export=view&id=197DFuM_xI8NYmOQKbWQ0oGnm1sWuWCrk" alt="Lights" style="width:100%">
      <h4>Lights</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="https://drive.google.com/uc?export=view&id=1ZLABZ6SF3rWeDlQGr_9MqDnek0IIeTj5" alt="Nature" style="width:100%">
      <h4>Forest</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  
  <div class="column cars">
    <div class="content">
      <img src="https://drive.google.com/uc?export=view&id=11lgC324ZlpNnE3e-XD8nuohLhTnIjHi_" alt="Car" style="width:100%">
      <h4>Retro</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="https://drive.google.com/uc?export=view&id=1rm82AVlz3K9AC4AznY8RL54-_mpNQal4" alt="Car" style="width:100%">
      <h4>Fast</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="https://drive.google.com/uc?export=view&id=1qtvMg67R8xDeenPOWafU_CvvCGARdFM8" alt="Car" style="width:100%">
      <h4>Classic</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>



  <div class="column people">
    <div class="content">
      <img src="https://drive.google.com/uc?export=view&id=1wSNS1bfZJKN6dIa5JjVR0OvXKywWUzvy" alt="Car" style="width:100%">
      <h4>Girl</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="https://drive.google.com/uc?export=view&id=12yrA84gd0oQKBYycPuydBqPzcg8hjKf3" alt="Car" style="width:100%">
      <h4>Man</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="https://drive.google.com/uc?export=view&id=1AwBmZO76_qemRD3eUmGXZlJRvNJ7fuBX" alt="Car" style="width:100%">
      <h4>Woman</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>






  <div class="column Animals">
    <div class="content">
      <img src="https://drive.google.com/uc?export=view&id=1HqEUHhEIfWPQd6d44E0PzDWr2cx7NLrj" alt="Animals" style="width:100%">
      <h4>Dog</h4>
      <p>Animals Filter check</p>
    </div>
  </div>
  <div class="column Animals">
    <div class="content">
    <img src="https://drive.google.com/uc?export=view&id=16nc-dDbo_bmaUy5q3VPihblkSNJr1GzY" alt="Animals" style="width:100%">
      <h4>Cat</h4>
      <p>Air cool down.</p>
    </div>
  </div>
  <div class="column Animals">
    <div class="content">
    <img src="https://drive.google.com/uc?export=view&id=1lYSylzeExeNv4OvYO8xXr9HjT9YcI77O" alt="Animals" style="width:100%">
      <h4>Tiger</h4>
      <p>LFairytale Anime Check</p>
    </div>
  </div>







  <div class="column Tribals">
    <div class="content">
      <img src="https://drive.google.com/uc?export=view&id=1hlB_WWrmBgL5XP0hEC0i06XdKEIFCK35" alt="Tribals" style="width:100%">
      <h4>Apparel</h4>
      <p>Tribals Check Filter</p>
    </div>
  </div>
  <div class="column Tribals">
    <div class="content">
    <img src="https://drive.google.com/uc?export=view&id=10Um1rXN2YIaM3DxYUrK_PHPob4xjbkBb" alt="Tribals" style="width:100%">
      <h4>Glossy</h4>
      <p>Violet sky wonder.</p>
    </div>
  </div>
  <div class="column Tribals">
    <div class="content">
    <img src="https://drive.google.com/uc?export=view&id=137zmiZigzAEJwHpp16x9y7kZFIUvtyr6" alt="Tribals" style="width:100%">
      <h4>Prited</h4>
      <p>Edge Of Tomorrow</p>
    </div>
  </div>






<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

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

function w3AddClass(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 w3RemoveClass(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(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
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";
  });
}
</script>

</body>
</html>

Answer 1

The problem lies in the following lines:问题在于以下几行：

<button class="btn" onclick="filterSelection('cars')"> Animals</button>
<button class="btn" onclick="filterSelection('cars')"> Tribals</button>

It should become它应该成为

<button class="btn" onclick="filterSelection('Animals')"> Animals</button>
<button class="btn" onclick="filterSelection('Tribals')"> Tribals</button>

The value that is given to the filterSelection function is used to show and hide the correct elements, and it should correspond to the class name you use in the markup.赋予 filterSelection function 的值用于显示和隐藏正确的元素，它应该对应于您在标记中使用的 class 名称。 So in the code所以在代码中

<div class="column Tribals">
<div class="content">
  <img src="https://drive.google.com/uc?export=view&id=1hlB_WWrmBgL5XP0hEC0i06XdKEIFCK35" alt="Tribals" style="width:100%">
  <h4>Apparel</h4>
  <p>Tribals Check Filter</p>
</div>

the class "Tribals" is used to show and hide this column. class "Tribals" 用于显示和隐藏此列。 Expanding your filtering system to 16 filters should be no problem, as long as you correctly give the value to the function that you call in your button.将您的过滤系统扩展到 16 个过滤器应该没有问题，只要您正确地为您在按钮中调用的 function 提供值。

So for example if you want to add a button that filters images that show tables the markup for your button would look like this:因此，例如，如果您想添加一个按钮来过滤显示表格的图像，那么您的按钮的标记将如下所示：

    <button class="btn" onclick="filterSelection('Tables')"> Tables</button>

The markup for the column that you want to hide or show would look like this:您要隐藏或显示的列的标记如下所示：

<div class="column Tables">
  <div class="content">
    .......
  </div>
</div>

运行图像组合过滤器引导代码时 Javascript 出现问题

问题描述

1 个解决方案

解决方案1
0 2020-07-26 15:10:14

运行图像组合过滤器引导代码时 Javascript 出现问题

问题描述

1 个解决方案

解决方案1 0 2020-07-26 15:10:14

解决方案1
0 2020-07-26 15:10:14