按图像过滤不想显示所有图像

时间：2017-10-16 09:12:23

标签： javascript jquery html css image

我正在加载页面时显示过滤图像库。默认显示所有图像。我有两个不同的标签

1。显示全部2.Nature 3.汽车4.人

现在我不希望所有图像都显示出来。默认情况下，我想在页面加载后默认显示自然过滤器图像。

请查看我的代码：Code is here

另外，附上我的代码

   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(" ");
    }
* {
    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;
}
<div class="main">

	<h1>MYLOGO.COM</h1>
	<hr>

	<h2>PORTFOLIO</h2>
	<input type="radio" onclick="filterSelection('all')" name="category" checked> Show all
	<input type="radio" onclick="filterSelection('nature')" name="category"> Nature
	<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
	<input type="radio" onclick="filterSelection('people')" name="category"> People

<div class="main">

<h1>MYLOGO.COM</h1>
<hr>

<h2>PORTFOLIO</h2>
<input type="radio" onclick="filterSelection('all')" name="category" checked> Show all
<input type="radio" onclick="filterSelection('nature')" name="category"> Nature
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
<input type="radio" onclick="filterSelection('people')" name="category"> People

<!-- Portfolio Gallery Grid -->
<div class="row">
	<div class="column nature">
		<div class="content">
			<img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
			<h4>Mountains</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column nature">
		<div class="content">
			<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
			<h4>Lights</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column nature">
		<div class="content">
			<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
			<h4>Forest</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>

	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars1.jpg" alt="Car" style="width:100%">
			<h4>Retro</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars2.jpg" alt="Car" style="width:100%">
			<h4>Fast</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars3.jpg" alt="Car" style="width:100%">
			<h4>Classic</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>

	<div class="column people">
		<div class="content">
			<img src="/w3images/people1.jpg" alt="Car" style="width:100%">
			<h4>Girl</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column people">
		<div class="content">
			<img src="/w3images/people2.jpg" alt="Car" style="width:100%">
			<h4>Man</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column people">
		<div class="content">
			<img src="/w3images/people3.jpg" alt="Car" style="width:100%">
			<h4>Woman</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

如何默认更改自然我不想显示所有图像。我累了，但仍然显示所有图像。谢谢你提前

4 个答案:

答案 0 :(得分：2)

在js文件中修改此行：

filterSelection("all")

通过

filterSelection("nature")

并删除已登录的“all”电台，并在“自然”电台中添加已选中

filterSelection("nature")
    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(" ");
    }
* {
    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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

	<h1>MYLOGO.COM</h1>
	<hr>

	<h2>PORTFOLIO</h2>
	<input type="radio" onclick="filterSelection('all')" name="category"> Show all
	<input type="radio" onclick="filterSelection('nature')" name="category" checked> Nature
	<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
	<input type="radio" onclick="filterSelection('people')" name="category"> People

<div class="main">

<h1>MYLOGO.COM</h1>
<hr>

<h2>PORTFOLIO</h2>
<input type="radio" onclick="filterSelection('all')" name="category" > Show all
<input type="radio" onclick="filterSelection('nature')" name="category" checked> Nature
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
<input type="radio" onclick="filterSelection('people')" name="category"> People

<!-- Portfolio Gallery Grid -->
<div class="row">
	<div class="column nature">
		<div class="content">
			<img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
			<h4>Mountains</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column nature">
		<div class="content">
			<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
			<h4>Lights</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column nature">
		<div class="content">
			<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
			<h4>Forest</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>

	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars1.jpg" alt="Car" style="width:100%">
			<h4>Retro</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars2.jpg" alt="Car" style="width:100%">
			<h4>Fast</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars3.jpg" alt="Car" style="width:100%">
			<h4>Classic</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>

	<div class="column people">
		<div class="content">
			<img src="/w3images/people1.jpg" alt="Car" style="width:100%">
			<h4>Girl</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column people">
		<div class="content">
			<img src="/w3images/people2.jpg" alt="Car" style="width:100%">
			<h4>Man</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column people">
		<div class="content">
			<img src="/w3images/people3.jpg" alt="Car" style="width:100%">
			<h4>Woman</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

答案 1 :(得分：1)

我希望这对你有用：

window.onload = function () {
 document.getElementById('nature').checked=true;
filterSelection('nature');
}

我创建了分叉链接：https://codepen.io/tavishaggarwal/pen/RLevRg。 如果您的问题仍未解决，请与我们联系。

答案 2 :(得分：0)

试试这个：在自然输入上添加一个id，window onload触发此元素上的click事件。 

<input type="radio" onclick="filterSelection('all')"  name="category" checked> Show all
<input type="radio" onclick="filterSelection('nature')" id="nature" name="category"> Nature
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
<input type="radio" onclick="filterSelection('people')" name="category"> People

window.onload = function(e){ 
    var l = document.getElementById('nature');
   l.click();
}

答案 3 :(得分：0)

您必须使用window.onload function 

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(" ");
}

window.onload = function () {
 document.getElementById('nature').checked=true;
filterSelection('nature');
}
* {
    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;
}
<div class="main">

<h1>MYLOGO.COM</h1>
<hr>

<h2>PORTFOLIO</h2>
<input type="radio" onclick="filterSelection('all')" name="category" checked> Show all
<input type="radio" id="nature" onclick="filterSelection('nature')" name="category"> Nature
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
<input type="radio" onclick="filterSelection('people')" name="category"> People

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column nature">
    <div class="content">
      <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
      <h4>Mountains</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
      <h4>Lights</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
      <h4>Forest</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  
  <div class="column cars">
    <div class="content">
      <img src="/w3images/cars1.jpg" alt="Car" style="width:100%">
      <h4>Retro</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="/w3images/cars2.jpg" alt="Car" style="width:100%">
      <h4>Fast</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="/w3images/cars3.jpg" alt="Car" style="width:100%">
      <h4>Classic</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>

  <div class="column people">
    <div class="content">
      <img src="/w3images/people1.jpg" alt="Car" style="width:100%">
      <h4>Girl</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="/w3images/people2.jpg" alt="Car" style="width:100%">
      <h4>Man</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="/w3images/people3.jpg" alt="Car" style="width:100%">
      <h4>Woman</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

希望它能帮到你

相关问题
最新问题