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

标签 javascript jquery html css image

当页面加载显示所有图像时，我默认创建过滤器图像库。我有两个四个不同的选项卡

<强>1。显示全部 2.自然 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>

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

最佳答案

修改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>

关于javascript - 按图像过滤 不想显示所有图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46766718/

上一篇：javascript - 将鼠标悬停在 plotly 上并出现一些图像

下一篇：javascript - jQuery PHP 将重复的行折叠成一个

相关文章：

javascript - 克隆/重用 html 表单(使用 javascript)

javascript - 如何使用正则表达式获取此处的日期？

javascript - *ng不更新，即使有 ChangeDetectorRef

javascript - 鼠标悬停时显示链接

javascript - jquery 进度条不显示

javascript - 使用键码在可滚动的 div 中上下导航

javascript - anchor 在 chrome 和 safari 浏览器中不起作用

javascript - 如何在使用 Jquery 加载新内容时更新 URL 地址

javascript - 如何更改 extjs 4.2.2 行编辑器中的按钮文本？

jquery - 包装多个元素 (jQuery)

©2024 IT工具网  联系我们