针对多个 Classes 之一/仅 Class 字符串的一部分 - className 与 classList

Question

所以我正在尝试为我的摄影作品集网站组合一个 Javascript 开关。我的目标是能够单击标记为仅显示日落的按钮并隐藏每个没有 "Sunsets" Class 的图像。我在下面提出的代码几乎可以工作，但是有一个主要缺陷：

此代码仅保留图像的可见性，例如下面的“1.jpg”，其 Class 为 exactly/only "Sunsets"（或 "NSFW," 或其他） .但通常我需要给图像提供不止一个 class，例如区分垂直或属于多个类别的图像。所以我需要代码来保持任何图像的可见性，例如下面的“2.jpg”，其 Class.

中的任何位置都有 "Sunsets"（或其他）

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) {

确实会检查整个 class 字符串。有 classList API 做你想做的，将你的测试替换为：

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

Answer 2

我会通过为所有图像添加 class 名称来简化它，这样您就可以轻松定位所有图像，然后使用切换的 class 隐藏您不想看到的图像.这也使您能够使用 css3 动画淡出您不想看到的图像。

function filterOn( clazz ){
  // get all the images using the additional img class
  var images = slice(document.getElementsByClassName('img'));
  // hide all the images
  var ret = images.map(function( image ){
    image.classList.add('hide');
    return image;
  })
  // reduce the images to only contain those you want to show
  .filter(function( image ){
    return image.classList.contains( clazz );
  })
  // show the image by removing the hide class
  .forEach(function( image ){
    image.classList.remove('hide');
  });
}

// show all images
function showAll(){
  var images = slice(document.getElementsByClassName('img'));
  images.forEach(function( image ){
    image.classList.remove('hide');
  });
}
// helper function to get an array from an array like object
function slice( arrayLike ){
  return Array.prototype.slice.call( arrayLike );
}

.img {
  display: block;
  float: left;
  margin-left: .8em;
  border: .3em solid #aaa;
}

.hide {
   display: none;
}

.filters {
  display: block;
  width: 100%;
  float: left;
}

.Sunsets {
  border: .3em solid orange;
}

.NSFW {
  border: .3em solid magenta;
}

<nav class="filters">
  <button id="Sunsets-off" onClick="filterOn('Sunsets')">Show Only Sunsets</button>
  <button id="NSFW-off" onClick="filterOn('NSFW')">Show Only NSFW</button>
  <button id="show-all" onClick="showAll()">Show All</button>
</nav>
<!-- I added an img class to the images for ease of use later -->
<section class="images">
  <img class="img Sunsets" src="http://placehold.it/50/50">
  <img class="img vertical Sunsets" src="http://placehold.it/50/50">
  <img class="img NSFW vertical" src="http://placehold.it/50/50">
  <img class="img Architectural" src="http://placehold.it/50/50">
  <img class="img Sunsets Landscapes" src="http://placehold.it/50/50">
  <img class="img Abstract" src="http://placehold.it/50/50">
  <img class="img NSFW LondonAndrews" src="http://placehold.it/50/50">
</section>

针对多个 Classes 之一/仅 Class 字符串的一部分 - className 与 classList

Targeting one of multiple Classes / only part of the Class string - className vs classList

javascript

classname

toggle

getelementsbytagname

getelementsbyclassname