为什么我不能用开关箱做我在JS里用If-做的事？

Question

您能帮助了解下面的JS DOM示例吗？

示例1中指定的if-else结构i工作，但示例2中指定的开关-case结构无法工作。开关-用例结构不能工作，尽管它们的功能相同。为什么？

谢谢

-例子1

fontSizes.forEach(size => {
 
    size.addEventListener('click', () => {
      
        if(size.classList.contains('font-size-1')) {
            .....
        } else if (size.classList.contains('font-size-2')) {
            .....   
        }
        
    })
})

--例2不起作用

fontSizes.forEach(size => {
 
    size.addEventListener('click', () => {
      
      switch (size.classList.contains) {
           case 'font-size-1': 
             ....
           break;
           case 'font-size-2': 
             ....
           break;
       }            
    })
})

Answer 1

请不要说他们不一样。在第一个函数中，调用函数add获取输出，而在第二个调用中，通过switch语句传递的所有内容都是对函数的引用。size.classlist.contains是一个函数，需要一个参数。请知道不同之处。

Answer 2

您没有正确地使用switch，而是检查size.classList.contains，它指向带有字符串的函数(如font-size-1)，而不是比较实际值。

可以使用split (与includes函数一起使用)，也可以在每种情况下使用size.classList.contains

请看这里：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains How to check className in a switch statement when an element has multiple classes

Answer 3

contains是一种方法。

所以你不能使用：switch(size.classList.contains){case 'class1':...}

相反，您应该使用if(size.classList.contains('class1')){}

如果您想要一个更干净的代码，您可以为这些情况创建一个数组(或对象)，并将if放在一个循环中。