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

Question

我有一个带有图形网格的网页，当我构建这个页面时，我添加了css类来表示某些东西，比如有图像/没有图像到一个封闭的div。然后我有了一个select元素，用户可以用它来过滤磁贴(nofilter，no image，has image)

<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上)，所以我添加了另一个select

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