Question

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

此代码仅保留图像的可见性，例如下面的“1.jpg”，其类别恰好/仅为“日落”（或“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)) {

Answer 2

我会通过为所有图像添加类名来简化它，以便您可以轻松地定位所有图像，然后使用切换类隐藏您不想看到的图像。这也使您能够使用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>

定位多个类之一/仅仅是Class字符串的一部分 - className vs classList

2 个答案: