0

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

前任：

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

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

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

4

6 回答 6

2

只需创建一个对象，将类名映射到调用各种 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...})
    };
于 2013-05-20T20:16:58.597 回答
0

怎么样：

$(function(){
    var $body = $('body');
    if($body.hasClass('CLASSNAME1')) 
    { ... } 
    else if($body.hasClass('CLASSNAME2')) 
    { ... }
});
于 2013-05-20T20:12:55.507 回答
0

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

$(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);
    });
});
于 2013-05-20T20:14:29.937 回答
0

也许这就是你想要的？

$(function () { 
   var classes = $('body').attr('class').split(' ');
   $.each(classes, function(i){
       var class = classes[i];
       switch class{
          //switch logic to execute function
       }
    });
  });
于 2013-05-20T20:17:40.173 回答
0

好吧，这有点声明性，但这是我的看法：

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 的例子非常相似。

于 2013-05-20T20:20:52.647 回答
0

如果您正在寻找 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/

于 2013-05-20T20:31:17.070 回答