针对多个类之一/仅部分类字符串 - className vs classList

Posted 2023-03-16

【中文标题】针对多个类之一/仅部分类字符串 - className vs classList

【英文标题】：Targeting one of multiple Classes / only part of the Class string - className vs classList

【发布时间】：2016-04-02 08:43:02

【问题描述】：

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

此代码仅保留图像的可见性，例如下面的“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">

【问题讨论】：

Nitpick：不要使用 setAttribute 设置事件。这就是 addEventListener 的用途。

您在 filterOff() 的最后一行漏输入了“imageclass”，为什么您的代码会找到“figure”标签？我认为应该是“img”。

@epascarello 谢谢！我只熟悉用于静态属性的“getElementById.innerHTML”语法，所以当我发现这不适用于 onClick 属性时，我基本上是在猜测/谷歌搜索。你能给我确切的语法吗？

@margincall 谢谢！解决的问题 #2！

addEventListener : developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

【参考方案1】：

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

【参考方案2】：

那个测试：

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

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

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

【讨论】：

这就是我所需要的！非常感谢！！