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

【问题标题】：Filter By Image Don't want show all image按图像过滤不想显示所有图像
【发布时间】：2017-10-16 09:12:22
【问题描述】：

当页面加载显示所有图像时，我正在创建过滤器图像库。默认情况下。我有两个四个不同的标签

1.全部显示 2.自然 3.汽车 4.人

现在我不想显示所有图像。默认情况下，我想在页面加载后默认显示 Nature 过滤器图像。

请查看我的代码：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>

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

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

在js文件中修改这一行：

filterSelection("all")

通过

filterSelection("nature")

并删除选中的“所有”单选并添加选中的“自然”单选

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>

【讨论】：

不客气！请验证一个最适合您的答案解决方案。
我如何将复选框更改为文本框点击
在您的所有单选框上添加一个 ID 并添加函数以使用 $("#yourID").prop("checked",true) 调用
@sripriya document.getElementById('nature').checked=true;

【解决方案2】：

我希望这对你有用：

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

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

【讨论】：

它的唯一工作性质我想要也保持标签也没有显示全部

【解决方案3】：

你必须使用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>

希望对你有帮助

【讨论】：

【解决方案4】：

试试这个：在自然输入上添加一个 id，然后窗口加载触发这个元素上的点击事件。

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

【讨论】：