javascript - 定位多个类之一/仅类字符串的一部分 - className 与 classList

Question

所以我正在尝试为我的摄影作品集网站制作一个 Javascript 切换器。我的目标是能够单击标记为“仅显示日落”的按钮并隐藏每个没有“日落”类的图像。我在下面提出的代码几乎可以工作，但有一个重大缺陷:

此代码仅保留以下图像的可见性，例如“1.jpg”，其类恰好/仅是“Sunsets”(或“NSFW”或其他)。但通常我需要为图像提供多个类别，例如区分垂直方向或属于多个类别的图像。因此，我需要代码来保留任何图像的可见性，例如“2.jpg”，其下方的类中的任何位置都有“日落”(或其他内容)。

JS:

<script>
        function filterOn(imageClass) {
            var image = document.getElementsByTagName('figure');
            for (i = 0; i < image.length; i++) {
                if (image[i].className != imageClass) {
                    image[i].style.display = 'none';
                }
            }
            document.getElementById(imageClass + '-off').innerHTML = 'Undo Filter';
            document.getElementById(imageClass + '-off').setAttribute('onClick', "filterOff('" + imageClass + "')");
            document.getElementById(imageClass + '-off').id = imageClass + '-on';
        }
        function filterOff(imageClass) {
            var image = document.getElementsByTagName('figure');
            for (i = 0; i < image.length; i++) {
                if (image[i].className != imageClass) {
                    image[i].style.display = 'inline-block';
                }
            }
            document.getElementById(imageClass + '-on').innerHTML = 'Show Only ' + imageClass;
            document.getElementById(imageClass + '-on').setAttribute('onClick', "filterOn('" + imageClass + "')");
            document.getElementById(imageClass + '-on').id = imageClass + '-off';
        }
    </script>

HTML:

    <ul>
        <li id="Sunsets-off" onClick="filterOn('Sunsets')">Show Only Sunsets</li>
        <li id="NSFW-off" onClick="filterOn('NSFW')">Show Only NSFW</li>
    </ul>
    <img class="Sunsets" src="1.jpg">
    <img class="vertical Sunsets" src="2.jpg">
    <img class="NSFW vertical" src="3.jpg">
    <img class="Architectural" src="4.jpg">
    <img class="Sunsets Landscapes" src="5.jpg">
    <img class="Abstract" src="6.jpg">
    <img class="NSFW LondonAndrews" src="7.jpg">

Answer 1

该测试:

if (image[i].className != imageClass) {

确实会检查整个类字符串。有classList用于执行您想要的操作的 API，将您的测试替换为:

if (!image[i].classList.contains(imageClass)) {