问使用javascript的图像过滤器
EN

Stack Overflow用户

提问于 2018-09-23 08:10:41

回答 2查看 5.2K关注 0票数 0

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

javascript

imagefilter

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-09-23 08:53:15

因为你的两个图像都有“性质”，所以滤镜不会有任何效果。我将您的代码调整为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>

票数 1

Stack Overflow用户

发布于 2018-09-23 08:59:30

我知道你是编程新手，所以要注意一些用户可能会给你提供建议你安装jQuery或Bootstrap的答案-虽然这是完全正确的，也是我推荐的-我同样理解这些都为初学者提供了陡峭的学习曲线。

因此，您可以使用HTML和裸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>

然后，我预计如果我单击它，除了包含类mountains的div之外，所有的filter类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，因为从长远来看，它们更具可持续性。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52461908

复制

相似问题

问使用javascript的图像过滤器
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript的图像过滤器EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript的图像过滤器
EN