javascript - 如何编写javascript来组合多个过滤器
问题描述
我有一个带有图形网格的网页,当我构建页面时,我添加 css 类来表示某些事物,例如有图像/没有图像到封闭的 div。然后我有一个选择元素,用户可以使用它来过滤图块(无过滤器,无图像,有图像)
<div class="mb-2">
<label for="selectArtistArtworkFilter" id="selectArtistArtworkFilterLabel">
Artist Artwork Filter
</label>
<select id="selectArtistArtworkFilter" class="custom-select col-3" aria-labelledby="selectArtistArtworkFilterLabel" onchange="artworkFilter('selectArtistArtworkFilter');">
<option value="1" selected="selected">
No Filter
</option>
<option value="2">
Without Artist Artwork
</option>
<option value="3">
With Artist Artwork
</option>
</select>
<span class="mx-2">
</span>
</div>
<div style="display:grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;">
<div class="tile noimage albumimage">
<figure class="figure" style="position:relative">
<a href="StatusReport00108_byartistalbum00001.html">
<img src="../style/images/folder.jpg" class="figure-img" width="200" height="200">
</a>
</figure>
</div>
<div class="tile image albumimage">
<figure class="figure" style="position:relative">
<a href="StatusReport00108_byartistalbum00002.html">
<img src="../images/gb7iqGOT4duS062Nh2a3Xg==.jpg" class="figure-img" width="200" height="200">
</a>
</figure>
</div>
通过调用 javascript 函数
function artworkFilter(selectbox)
{
var select = document.getElementById(selectbox);
var selected = select.options[select.selectedIndex].value;
if(selected=="1")
{
var figures = document.getElementsByClassName("tile");
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = "block";
}
}
else if(selected=="2")
{
var figures = document.getElementsByClassName("image");
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = "none";
}
figures = document.getElementsByClassName("noimage");
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = "block";
}
}
else if(selected=="3")
{
var figures = document.getElementsByClassName("image");
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = "block";
}
figures = document.getElementsByClassName("noimage");
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = "none";
}
}
}
这可行,但我随后需要添加另一个过滤器(在专辑插图上)所以我添加了另一个选择
<label for="selectCoverArtFilter" id="selectCoverArtFilterLabel">
Cover Art Filter
</label>
<select id="selectCoverArtFilter" class="custom-select col-3" aria-labelledby="selectCoverArtFilterLabel" onchange="albumArtworkFilter('selectCoverArtFilter');">
<option value="1" selected="selected">
No Filter
</option>
<option value="2">
Without Cover Art
</option>
<option value="3">
With Cover Art
</option>
和另一个javascript函数
function albumArtworkFilter(selectbox)
{
var select = document.getElementById(selectbox);
var selected = select.options[select.selectedIndex].value;
if(selected=="1")
{
var figures = document.getElementsByClassName("tile");
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = "block";
}
}
else if(selected=="2")
{
var figures = document.getElementsByClassName("albumimage");
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = "none";
}
figures = document.getElementsByClassName("noalbumimage");
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = "block";
}
}
else if(selected=="3")
{
var figures = document.getElementsByClassName("albumimage");
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = "block";
}
figures = document.getElementsByClassName("noalbumimage");
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = "none";
}
}
}
现在这个是独立工作的,但没有考虑到第一个过滤器的设置。所以我的下一个阶段是用一个函数替换这两个函数,该函数一次将两个选择都考虑在内。
但后来我记得我需要一个第三个过滤器,看起来这很快就会变得非常混乱,我认为必须有一种更优雅的方式来做到这一点?
解决方案
创建一个切换样式的功能以节省重复..
function toggleDisplay(className, displayValue){
var figures = document.getElementsByClassName(className);
for (i = 0; i < figures.length; i++)
{
figures[i].style.display = displayValue;
}
}
现在你可以把你的 if 语句丛林变成:
function albumArtworkFilter(selectbox)
{
var select = document.getElementById(selectbox);
var selected = select.options[select.selectedIndex].value;
if(selected=="1")
{
toggleDisplay("tile", "block");
}
else if(selected=="2")
{
toggleDisplay("albumimage", "none");
toggleDisplay("noalbumimage", "block");
}
else if(selected=="3")
{
toggleDisplay("albumimage", "block");
toggleDisplay("noalbumimage", "none");
}
}
切换替代:
switch(selected) {
case "1":
toggleDisplay("tile", "block");
break;
case "2":
toggleDisplay("albumimage", "none");
toggleDisplay("noalbumimage", "block");
break;
// .... etc
}
如果您希望能够为每个元素传递多个样式属性.. 将toggleDisplay
函数修改为以下内容:
function toggleDisplay(className, displayValue){
var figures = document.getElementsByClassName(className);
var keys = Object.keys(displayValue);
for (i = 0; i < figures.length; i++)
{
for (var j = 0; j < keys.length; j++){
figures[i].style[keys[j]] = displayValue[keys[j]];
}
}
}
然后你会用
toggleDisplay("tile", {display: "block", color: "black" });
推荐阅读
- c# - 拦截网络中的请求 - Xamarin WebView
- python - 使用 Cplex Python API 解决大型二次规划问题时内存不足
- android - 如何添加选项以分享到 Instagram 快拍?
- java - docx4j 中没有字体映射
- sumo - 使用 TRACI 控制 SUMO 中的多个红绿灯路口
- gcc - obj-copy 忽略一些填充
- angular - 无法在代码共享项目中使用 Nativescript Localstorage 插件
- java - Java如何遍历3个arrayList
- laravel - 如何在 laravel 的刀片中添加布局?
- vba - 连接单元格但之前检查值 - Excel VBA