为什么我不能像在 JS 中使用 If-Else 那样使用 Switch-Case？

Question

你能帮忙看看下面的 JS DOM 例子吗，

我在示例 1 中指定的 if-else 结构 有效，但我在示例 2 中指定的 switch-case 结构 无效工作。 switch-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

您没有正确使用 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

Answer 2

contains是一种方法。

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

你应该使用 if(size.classList.contains('class1')){}

如果您想要更简洁的代码，可以为案例创建一个数组（或对象）并将 ifs 放在循环中。

Answer 3

请注意它们不一样。在第一个中，您调用 function add 获取输出，而在第二个中，您通过 switch 语句传递的只是对函数的引用。 size.classlist.contains 是一个需要参数的函数。请知道区别。

为什么我不能像在 JS 中使用 If-Else 那样使用 Switch-Case？

Why I can't do with Switch-Case what I do with If-Else in JS?

javascript

if-statement

dom

switch-statement

dom-events