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

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

转载作者：行者123 更新时间：2023-11-30 11:29:34

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

<强>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>

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

最佳答案

在js文件中修改这一行:

filterSelection("all")

通过

filterSelection("nature")

并删除勾选的“all”单选框并添加勾选的“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/

文章推荐： java - 使用 Java 永久删除 Excel 空白列

文章推荐： java - beans.xml Spring CXF 中的奇怪验证错误

文章推荐： ios - 无法识别的选择器发送到实例 0x103026600 payfort

文章推荐： java - openFileInput() 和/或 openFileOutput() i/o 流静默失败

c# - 不想 JSON 序列化整个类列表
我的应用程序中有一个 IList 站点，并且站点有大量属性。我想将此列表转换为 JSON，以便在类似于此的下拉列表中使用 var sites = SiteRepository.FindAll
javascript - 不想 promise 吞下错误
我正在将一些代码从 bluebird 切换到原生 Promises，并且我对原生 promises 吞下错误这一事实感到相当恼火，即使没有定义 .catch() 也是如此。它使调试变得不可能，除非您在
multithreading - 我是否曾经*不想*想使用读/写锁而不是普通的互斥锁？
在同步访问共享资源时，是否有理由不使用读/写锁而不是普通的互斥锁(基本上只是写锁)，除了它具有比我可能需要的更多功能的哲学原因？换句话说，如果我只是默认使用读/写锁作为我首选的同步结构，我是不是在踢
javascript - onclick 样式整个 li - 不想
我刚进入这个元素，代码已经写好了，但我们发现了一个问题。当您单击菜单中的任何位置时，它会变成金色，您看不到菜单该部分中的任何链接。您可以再次单击它，它将返回到正常状态。这只发生在 Internet E
C++ std::queue 不想 push()
这是一个简单的类和简单的测试函数: #include #include namespace { using namespace std; } class NameStream {
c++ - std::vector::erase() 不想 move
我有一个 std::vector其中 Foo是一个包含 Foo( Foo&& ) noexcept 的类. 向容器中添加对象完美无缺，但是使用 std::vector::erase( iterator
json - Safari 和 Chrome 不想 JSON.parse
我正在通过这段代码使用各种浏览器尝试 localStorage 和 JSON: function getStorage() { stored = JSON.pa
visual-studio-2010 - 在 Visual Studio 2010 中同时运行两个项目 - 不想
您可能认为此问题与 Running two projects at once in Visual Studio 完全相同.不完全是，恰恰相反。我有一个带有两个 MVC3 项目的 VS 2010 解决
html - 在 CSS 中，我在页眉和页脚之间的侧 div(仅用于设计)不想 100% 高。也不能把相同长度的菜单项放在一边
我正在制作一个网站:http://arc-angyal.hu/ 我的第一个问题是，我无法让左侧的红色 div 足够高以填充页眉和页脚之间的空间。它位于标题之后和导航之前。我已经设置: html, bo
c++ - std::thread - "terminate called without an active exception"，不想 'join' 它
根据 This Question ，我正在使用线程来终止用户输入的函数。我的代码看起来像: bool stopper = false; thread stopThread(userStop, &sto

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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