检查特定类以执行 switch 语句答案

【问题标题】：Check for specific class to execute switch statement检查特定类以执行 switch 语句
【发布时间】：2013-05-20 20:09:02
【问题描述】：

我正在基于 body 类中的特定类运行 json 调用，以帮助减少各种页面上的不必要调用。

例如：

$(function () {
    if ($('body.CLASSNAME1').length == 1) {
        //JSON call
    });
});

$(function () {
    if ($('body.CLASSNAME2').length == 1) {
        //A Different JSON call
    });
});

为了清理这个问题，我想要一个函数并根据给定的类名执行内部函数。我正在考虑一个 switch 语句，但无法将我的大脑包裹在逻辑上，我从 $.hasClass('') 开始，但无法根据唯一的类名找出任何其他读取和执行方式。

【问题讨论】：

switch 语句可能无法满足您的需求。请注意，您的 if 语句后面有一个额外的 )。
有多少种不同的选择？只有这两个、几十个、几百个？
老式的else if怎么样

标签： javascript jquery switch-statement

【解决方案1】：

只需创建一个对象，将类名映射到调用各种 XHR 调用的函数，然后枚举该对象，测试每个类名，并在 body 具有该类时调用该函数。

 $(function(){
    // Map your keys (class names) to your JSON calls
    var classes = {
        CLASSNAME1: function() {
                        // JSON call
                    }
        CLASSNAME2: function() {
                        // A Different JSON call
                    }
    };

    // enumerate the object, calling the related function for each found class
    $.each(classes, function(key, func) {
        if ($("body").hasClass(key))
            func();
    })
 });

如果不需要额外的逻辑，您也可以使用$.proxy 简单地绑定 XHR 参数：

    var classes = {
        CLASSNAME1: $.proxy($, "ajax", {...parameters...})
        CLASSNAME2: $.proxy($, "ajax", {...parameters...})
    };

【讨论】：

【解决方案2】：

怎么样：

$(function(){
    var $body = $('body');
    if($body.hasClass('CLASSNAME1')) 
    { ... } 
    else if($body.hasClass('CLASSNAME2')) 
    { ... }
});

【讨论】：

【解决方案3】：

switch 语句在这种情况下没有多大意义，因为一个元素可以有多个类，因此它可以匹配多种情况。但是，您可以使用 .each() 摆脱 if 语句：

$(function(){

    $('body.CLASSNAME1').each(function(){
        $.getJSON(args);
    });
    $('body.CLASSNAME2').each(function(){
        $.getJSON(args);
    });
    $('body.CLASSNAME3').each(function(){
        $.getJSON(args);
    });

});

不过，它并不比你以前的效率高。

您可以使用包含每个类名的 ajax 选项映射的对象来进一步简化它。

var ajaxOptions = {
    "CLASSNAME1": {
        url: "...",
        ...
    },
    "CLASSNAME2": {
        url: "...",
        ...
    },
    "CLASSNAME3": {
        url: "...",
        ...
    }
};
$.each(ajaxOptions,function (classname,options) {
    $("body." + classname).each(function(){
        $.ajax(options);
    });
});

【讨论】：

【解决方案4】：

也许这就是你想要的？

$(function () { 
   var classes = $('body').attr('class').split(' ');
   $.each(classes, function(i){
       var class = classes[i];
       switch class{
          //switch logic to execute function
       }
    });
  });

【讨论】：

【解决方案5】：

嗯，这有点声明性，但这是我的想法：

var callbacks = {
    classone: function() {
        //TODO
    },
    classtwo: function() {
    }
}
var bod = ${'body');
for (var cls in callbacks) {
    // 'hasOwnProperty' is just a safety check for object iteration
    if (callbacks.hasOwnProperty(cls) && bod.hasClass(cls) {
         callbacks[cls]();
    }
}

squint 的例子非常相似。

【讨论】：

【解决方案6】：

如果您正在寻找 switch/case 语句的确切用法，可以这样做：

$.each( $('body').attr('class').split( ' '), function( i, cls) {
    switch (cls) {
        case 'CLASSNAME1': {
            alert( 'JSON call');
            break;
        }
        case 'CLASSNAME2': {
            alert( 'A Different JSON call');
            break;
        }
    }
});

jsfiddle 上的这个例子：http://jsfiddle.net/b36F8/

【讨论】：