Switch 语句和 jQuery hasClass 函数答案

【问题标题】：Switch Statement and jQuery hasClass functionSwitch 语句和 jQuery hasClass 函数
【发布时间】：2016-09-24 21:36:28
【问题描述】：

我正在尝试使用 switch 语句来检查当前页面是否具有特定的正文类。这就是我正在寻找的东西：

var bodyClass = $('body').hasClass('className')

 switch(bodyClass) {
    case 'homepage':
        // console.log("This is the homepage");
        break;
    case 'residential-page':
        // console.log("This is the residential page");
        break;
     default:
     // console.log("default code block ran");
 }

我知道 jQuery hasClass 函数返回 true 或 false 并且像 $('body').hasClass('someClassName') 一样使用，这将返回 true 或 false。此外，对于给定的页面，我的 body 通常有大约 7-10 个不同的类名。

【问题讨论】：

有什么理由不能只使用 if/else 语句？
switch 语句用于比较两个值。由于class 可以包含多个值，因此您可能不应该使用 switch。您可能需要grab all the classes，然后使用if 语句。
$.hasClass 用于检查特定元素是否具有特定类。
对不起，我的意思是说有些地方的代码看起来像这样：Switch() {} case '': case '': case '': case '': case '': case '': case '': 我想避免以下类型的 if 语句：if (body.hasClass('abc') || body.hasClass('abc') || body.hasClass('abc') || body.hasClass('abc') || body.hasClass('abc') || body.hasClass('abc')) { // some code }（对不起: 看来上面的例子在没有换行符的情况下会有点难以阅读）。

标签： javascript jquery switch-statement

【解决方案1】：

我知道这是一个旧线程，但它可能对其他人有所帮助。

如果您能够确保元素的类以特定顺序声明，则可以确保您要检查的类在列表中的第一个/最后一个，并使用类似于此的内容：

var bodyClass = $('body').attr('class');
var firstClass = bodyClass.slice(0, bodyClass.indexOf(' '));

switch(firstClass) {
    case 'homepage':
        // Some code here
        break;
    case 'residential-page':
        // Other code here
        break;
    default:
        // More code here
}

【讨论】：

【解决方案2】：

我同意另一个答案，即您更适合在此处使用 if、else if 语句，但另一种方法是将类从 body 标记中剥离出来并根据您的字符串检查它们：

var bodyClasses = ($('body').attr('class') || '').split(' ');

for (var i = 0, len = bodyClasses.length; i < len; i++) {
 switch(bodyClasses[i]) {
    case 'homepage':
        // console.log("This is the homepage");
        break;
    case 'residential-page':
        // console.log("This is the residential page");
        break;
     default:
     // console.log("default code block ran");
 }
}

【讨论】：

【解决方案3】：

在我看来，这不是 switch 的用例，而是一组简单的分支

var body = $('body');

if(body.hasClass('abc')) {
}
else if(body.hasClass('def')) {
}
else {
  /* default case */
}

/* etc */

【讨论】：

作为我的旁注，我建议其他人用 $ 前缀表示 jQuery 对象的变量（例如var $body = $('body');）。只是个人喜好。
有趣的约定 Erik。但它给了我 PHP 闪回！