javascript - 如何编写javascript来组合多个过滤器

Question

我有一个带有图形网格的网页，当我构建页面时，我添加了 css 类来表示某些事物，例如包含图像/没有图像到封闭的 div。然后我有一个用户可以用来过滤图 block 的选择元素(nofilter，没有图像，有图像)

<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(&#x27;selectArtistArtworkFilter&#x27;);">
        <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";
       }
    }
}

这可行，但我需要添加另一个过滤器(在 albumartwork 上)所以我添加了另一个选择

<label for="selectCoverArtFilter" id="selectCoverArtFilterLabel">
        Cover Art Filter
    </label>
    <select id="selectCoverArtFilter" class="custom-select col-3" aria-labelledby="selectCoverArtFilterLabel" onchange="albumArtworkFilter(&#x27;selectCoverArtFilter&#x27;);">
        <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";
       }
    }
} 

现在这些过滤器单独工作，但不考虑第一个过滤器的设置。所以我的下一阶段是用一个函数替换这两个函数，该函数同时考虑了两个选择。

但后来我想起我需要第三个过滤器，而且看起来这很快就会变得非常困惑，我认为必须有更优雅的方法来做到这一点？

Answer 1

创建一个切换样式的函数以节省重复......

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