堆栈内存溢出
  繁体   English   中英

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

[英]Problem with Javascript on running image portfolio filter Bootstrap code

 原文  2020-07-26 14:14:18  5   1    javascript/ html/ css/ twitter-bootstrap

问题描述

您好，我从 引导程序中获取了图像组合过滤器的代码

此代码有 4 个过滤器按钮 [显示全部、自然、汽车、人]。 现在我想添加更多过滤器按钮，我添加了 2 个按钮，即 [动物和部落]。 现在我将编写我在下面运行代码并单击按钮 Animals 和 Tribals 时使用的代码。显示 Cars 的过滤结果。

请更正我的脚本。 我还想添加 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 个解决方案

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

问题在于以下几行：

<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 function 的值用于显示和隐藏正确的元素，它应该对应于您在标记中使用的 class 名称。 所以在代码中

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

class "Tribals" 用于显示和隐藏此列。 将您的过滤系统扩展到 16 个过滤器应该没有问题，只要您正确地为您在按钮中调用的 function 提供值。

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

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

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在 javascript 中使用 Promises 运行代码时出现问题 投资组合过滤器 jQuery库干扰Java导航栏和可过滤组合的小问题-引导3 投资组合中的动画引导程序 如何使用Ajax和javascript构建图像组合 筛选投资组合JQuery 带有过滤器和fancybox的HTML产品 如何使用jquery在Twitter bootstrap3中使用nav nav-pills过滤投资组合网格 删除投资组合过滤器中的“全部”按钮，并在JavaScript中自动显示特定过滤器按钮 双图像滑块组合
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM