Question

我有一个jquery函数，我重复.red方式太多次了。

我想用$（this）替换它们，但我不知道正确的方法。

$(".red").ready(function () {
    $(this).addClass("active");
});

http://jsfiddle.net/LGDz2/

这是代码的简化版本以及我希望它如何表现，希望它对你们有意义。

这里的想法是能够替换初始的.red并将其应用于我在函数内添加的所有代码行。

问候。

编辑：我试图将其简化到最大程度，因为我在复杂的解释中迷失了，因为我有点尴尬发布我糟糕的代码lol，这里是我想要优化的代码：

function showRed() {
    $(".red").show();
    if (position == 0) {
        $(".red").css({opacity : "0", left: "0"}).transition({opacity:1}, 500, ezin);
    } else if (position < 1){
        $(".red").css({left : "100%", });
    } else if (position > 1) {
        $(".red").css({left : "-100%", });
    }
    position = 1;
    goodbye();
    $(".red").css({scale: "1"}).transition({left:0}, 500, ezin).addClass("active");
}

function showGreen() {

    $(".green").ready(function(){
        $(".green").show();
        if (position == 0) {
            $(".green").css({opacity : "0", left: "0"}).transition({opacity:1}, 500, ezin);
        } else if (position < 2){
            $(".green").css({left : "100%", });
        } else if (position > 2) {
            $(".green").css({left : "-100%", });
        }
        position = 2;
        goodbye();
        $(".green").css({scale: "1"}).transition({left:0}, 500, ezin).addClass("active");
    });

}

我想要的是优化所有这些，所以我不必为每张幻灯片编写此代码。顺便说一下，我正在使用jQuery传输，转换就像在这里有点动画一样。

showBlue也一样。

这就是它的工作原理：http://dlacrem.16mb.com/dlatest/positions.html

Answer 1

您需要使用：

$(document).ready(function () { 
    $(".red").addClass("active");
});

上面的代码会在页面加载时将类active添加到您的div red。

.ready()方法只能在与当前文档匹配的jQuery对象上调用

Answer 2

查看代码，您想要自己一步一步地做的第一件事就是将$(".green")的所有用法重构为局部变量。

这会给：

function showGreen() {
    var element = $(".green");
    element.show();
    if (position == 0) {
        element.css({opacity : "0", left: "0"}).transition({opacity:1}, 500, ezin);
    } else if (position < 2){
        element.css({left : "100%", });
    } else if (position > 2) {
        element.css({left : "-100%", });
    }
    position = 2;
    goodbye();
    element.css({scale: "1"}).transition({left:0}, 500, ezin).addClass("active");
}

当你想删除任何类型的变量时，这可能是你所做的那种重构。

之后你做的事情取决于你如何调用这些功能。然后，标准重构只需将其提升为函数参数，并观察在此阶段showGreen和showRed将是相同的（假设我没有注意到的属性没有细微差别）。< / p>

function show(element) {
    element.show();
    if (position == 0) {
        element.css({opacity : "0", left: "0"}).transition({opacity:1}, 500, ezin);
    } else if (position < 2){
        element.css({left : "100%", });
    } else if (position > 2) {
        element.css({left : "-100%", });
    }
    position = 2;
    goodbye();
    element.css({scale: "1"}).transition({left:0}, 500, ezin).addClass("active");
}

然后，您可以将其称为show($('.red'))或show($('.green'))。

或者，如果你想更像是这样称呼它：

$('.red').click(showRed);

然后你可以改变功能开始

var element = $(this)

那应该做你想做的事。

Answer 3

你只是在寻找类似的东西吗？

$(document).ready(function () {
    var $red = $('.red');
    $red.addClass("active");
    $red.somethingelse();
});

Answer 4

这样的东西？：

$(document).ready(function () { 
    function updateRed($class) {
        $class.addClass("active");  
    }
    var $red = $('.red');
    updateRed($red);
});

http://jsfiddle.net/LGDz2/2/

Answer 5

您的问题是代码中this指的是文档对象。这是因为ready伪事件被绑定到文档，忽略了用于绑定此伪事件的任何对象。

的确，看起来像你想要的那样：

$(document).ready(function(){
    var $reds = $('.red'); 
    // then you can use $reds inside this ready handler scope
});

正确的$（this）语法

5 个答案: