0

在看到一些重复后，我正在尝试优化我的代码。

这是代码：

function show($div, $change, $value){
    var $container = "#" + $div;
    var $class = $div + "-" + "hidden";

    //alert($class + $container + $change + $value);

    $($container).addClass($class);
    $($container).animate({
        $change: $value
    }, 1000, function(){
            $($container).removeClass($class);
        } 
    );
}

show('header', 'top', '0');
show('nav', 'left', '0');
show('wrapper', 'opacity', '0');

这个区域： $change: $value - 是我在脚本中遇到问题的地方。我可以这样做吗？他们应该以字符串的形式出现吗？

4

2 回答 2

2 
function show($div, $change, $value){
    var $container = "#" + $div;
    var $class = $div + "-" + "hidden";

    //alert($class + $container + $change + $value);

    $($container).addClass($class);

    var animation = {}; // create another object
    animation[$change] = $value; // and set its property

    $($container).animate(animation, 1000, function(){
            $($container).removeClass($class);
        } 
    );
}
于 2012-08-17T01:56:41.143 回答
1

我认为您正在尝试在文字中动态设置变量名称。在 JavaScript 中，你可以这样做objectname["variablename"] = value

实际上，您可以在这里做两件事：

  1. 您传递给 animate() 的第一个参数的文字可以被拉出
  2. $container 的 jQuery 评估可以被拉出，完成一次，然后重用以加快速度。

尽管有些人可能将 2 称为过早优化的示例，但我认为无论如何它会使您的代码更具可读性。

function show($div, $change, $value){

    var $container = "#" + $div;
    var $class = $div + "-" + "hidden";

    //alert($class + $container + $change + $value);

    var animation = {}; //declare a literal
    animation[$change] = $value; //create a name-value pair based on args

    var jqContainer = $($container);  //extract multiple jQuery evaluations
    jqContainer.addClass($class);
    jqContainer.animate(animation, 1000, function(){
            jqContainer.removeClass($class);
        } 
    );
}
于 2012-08-17T02:07:49.693 回答