使用 javascript 的图像过滤器答案

【问题标题】：Image filter with javascript使用 javascript 的图像过滤器
【发布时间】：2018-09-23 00:10:41
【问题描述】：

我是网络开发的新手。我正在尝试创建我的摄影网页。我创建了一个基本的 html 设计。我想在单击特定按钮时过滤图像。我浏览了有关它的 w3schools 代码，但不太清楚。不使用 JQuery。这是我的带有按钮的 html 代码。谢谢

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gallery</title>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
  <script src="script.js"></script>
  <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')">ALL</button>
    <button class="btn active" onclick="filterSelection('all')">Nature</button>
    <button class="btn active" onclick="filterSelection('all')">Animal</button>

  </div>
  <!--grid-->
  <div class="row">
    <div class="column_nature">
      <div class="content">
        <img src="images/nature.jpg" style="width:40%">
        <h4>Nature</h4>
        <p>This is me</p>
      </div>
    </div>
  </div>

  <div class="column_nature">
    <div class="content">
      <img src="images/swan.jpg" style="width:40%">
      <h4>Swan</h4>

    </div>
  </div>


</body>

</html>

【问题讨论】：

您能否更清楚地说明您到底想要什么？ IE。然后过滤掉是什么意思？你真正想要发生什么？此外，请在您的脚本标签 script.js 中提供代码，甚至在 style.css 中提供您的 CSS 文件。
我的意思是当我点击自然时，它应该只显示自然图片，当我点击动物时，它应该只显示天鹅的图像。我只写了那些脚本和css链接作为开始。
好的，那么接下来发生的事情是，当您单击时，您是在告诉它执行一个 JavaScript 函数，该函数不是编写的，因此它实际上并没有做任何事情。我会提供答案。

标签： javascript imagefilter

【解决方案1】：

因为您的两张图片都带有“自然”元素，所以滤镜不会产生任何效果。我将您的代码调整为w3schools example，但对其进行了更改，使第一张图像具有“自然”作为过滤器，第二张图像具有“鸟”作为过滤器。

顺便说一句，列和过滤器名称之间没有下划线（如果您像在代码中那样放入下划线），它将不起作用。我也改编了这个。

祝你好运

/*this goes in your script.js*/

filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
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];
    }
  }
}

// Hide elements that are not selected
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";
  });
}

/*this bit will go into your style.css file*/

* {
    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: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    display: none; /* Hide columns 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;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #666;
   color: white;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gallery</title>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
  <script src="script.js"></script>
  <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')">ALL</button>
    <button class="btn active" onclick="filterSelection('nature')">Nature</button>
    <button class="btn active" onclick="filterSelection('bird')">Animal</button>

  </div>
  <!--grid-->
  <div class="row">
    <div class="column nature">
      <div class="content">
        <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg" style="width:40%">
        <h4>Nature</h4>
        <p>This is me</p>
      </div>
    </div>
  </div>

  <div class="column bird">
    <div class="content">
      <img src="https://www.phrases.org.uk/images/swan-song-1.jpg" style="width:40%">
      <h4>Swan</h4>

    </div>
  </div>


</body>

</html>

【讨论】：

当您添加具有现有过滤器名称的其他图像时，例如自然（但不同的图像），然后您可以在点击时显示图像组。
顺便说一句，给出的javascript不是jQuery，只是普通的javascript。
非常感谢

【解决方案2】：

我了解您是编程新手；所以请注意，有些用户可能会向您提供建议您安装 jQuery 或 Bootstrap 的答案——尽管这完全正确，而且我会推荐它——我同样理解这些都为初学者提供了陡峭的学习曲线。

因此，您可以使用 HTML、CSS 和裸 JavaScript 库作为标准进行开发。因此，我在下面的代码中为您的问题提供了解决方案，并记录了我的代码，以便您更好地理解它。

用我的代码替换你的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<script src="script.js"></script>
<div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('All')">ALL</button>
    <button class="btn active" 
 onclick="filterSelection('Nature')">Nature</button>
    <button class="btn active" 
 onclick="filterSelection('Swan')">Animal</button>

</div>
<!--grid-->
<div class="row">
    <div class="column_nature filter" id="Nature">
        <div class="content">
            <img src="images/nature.jpg" style="width:40%">
            <h4>Nature</h4>
            <p>This is me</p>
        </div>
    </div>
</div> 

 <div class="column_nature filter" id="Swan">
<div class="content">
            <img src="images/swan.jpg" style="width:40%">
            <h4>Swan</h4>

        </div>
    </div>

    </div>
   <script>
   // Function to hide all other elements, bar the parameter provided
    function filterSelection(elementToShow){
    if(elementToShow != "All"){ 
    // Get an array of elements with the class name, filter.
    var x = document.getElementsByClassName("filter");
    // For each of them
    for(var i = 0; i < x.length; i++){
    // Make them invisible
    x[i].style.display = "none";
    }
    // Get and then make the one you want, visible
    var y = document.getElementById(elementToShow).style.display = "block";
    }
    else{ // If the parameter provided is all, we want to display everything
    // Get an array of elements with the class name, filter.
    var x = document.getElementsByClassName("filter");
    // For each of them
    for(var i = 0; i < x.length; i++){
    //Make them visible
    x[i].style.display = "block";
    }
    }

    }
    </script>
  </body>   
  </html>

请注意以下事项；如果您添加一个新按钮来过滤其他内容，则必须给它一个 * onclick="filterSelection('x')" * 其中 x 是您要过滤的名称。然后在要保留的 div 上，只需给它一个与“x”同名的类。

例如，如果我有一个按钮：

<button onclick="filterSelection('Mountains')">Mountains</button>

然后我希望如果我单击它，所有过滤器类 div 将被隐藏，除了具有类山的 div。所以我必须有一个像这样的 div：

<div class="filter Mountains">This would be the div that would be displayed on click of the above button, and all others would be hidden.</div>

我希望这有助于为您提供您正在寻找的答案，尽管最终最好研究 Bootstrap 或 jQuery，从长远来看，这将更具可持续性。

【讨论】：