1. 首页
  2. 问题列表
  3. 运行映像组合筛选器引导代码时的Javascript问题
提问者：小点点

运行映像组合筛选器引导代码时的Javascript问题


你好，我从bootstrap获取了图像组合过滤器的代码

这个代码有4个过滤按钮[显示全部，自然，汽车，人]。 现在我想添加更多的过滤按钮，我添加了2个按钮，即[动物和部落]。 现在我将编写代码，我已经使用了下面的运行代码和点击按钮动物和部落汽车的过滤结果显示。

请改正我的剧本。 另外，我想添加16个过滤器，所以如何修改这个脚本，以使用这个目的。 谢谢

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

共1个答案

匿名用户

问题出在以下几行:

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

它应该成为

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

赋予filterSelection函数的值用于显示和隐藏正确的元素，它应该与您在标记中使用的类名相对应。 所以在代码中

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

类“Tribals”用于显示和隐藏该列。 扩展你的过滤系统到16个过滤器应该是没有问题的，只要你正确地给你在你的按钮中调用的函数的值。

因此，例如，如果您想添加一个按钮来过滤显示表格的图像，则按钮的标记如下所示:

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

要隐藏或显示的列的标记如下所示:

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

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS