使用 javascript 的图像过滤器

Question

我是网络开发新手。我正在尝试创建我的摄影网页。我创建了一个基本的 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>

Answer 1

因为你的两张图片都有 'nature'，滤镜不会有任何效果。我将您的代码改编为 w3schools example，但对其进行了更改，以便第一张图片具有 'nature' 作为过滤器，第二张图片具有 'bird' 作为过滤器。

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

祝你好运

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

Answer 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"同名的class即可。

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

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

然后我希望如果我单击它，所有过滤器 class div 将被隐藏，除了具有 class 山脉的 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，这在长期运行.

使用 javascript 的图像过滤器

Image filter with javascript

javascript

imagefilter