.css函數在處理程序函數中不起作用

Question

我想更改命名函數內部的CSS屬性，然后處理click事件。 如果我在click事件中定義的匿名函數中調用.css，它將起作用。 但是，我想在處理函數內定義的命名函數內調用.css。 這是我的代碼。

$(document).ready(function () {
    $('#popup').click(partial(coolTransition, $(this)));
});

function coolTransition(elem) {
    shrink();

    function shrink() {
        elem.css('background-color', '#000000');
    }
}

//used to implement partial function application so that I can pass a handler reference that takes arguments. 
//see http://stackoverflow.com/questions/321113/how-can-i-pre-set-arguments-in-javascript-function-call-partial-function-applic
function partial(func /*, 0..n args */ ) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
        var allArguments = args.concat(Array.prototype.slice.call(arguments));
        return func.apply(this, allArguments);
    };
}

在此先感謝您的幫助。

Answer 1

您認為$(this)在第二行中指的是什么？ 不是$('#popup') 。 如果要引用它，則必須先創建一個引用：

$(document).ready(function () {
    var $popup = $('#popup');
    $popup.click(partial(coolTransition, $popup));
});

就是說，不必使用partial 。 您也可以這樣做：

$('#popup').click(function() {
    coolTransition($(this));
});

甚至

$('#popup').click(function() {
    $(this).css('background-color', '#000000');
});

還有許多其他方式...

順便說一句。 在coolTransition內部定義shrink似乎是不必要的。 除非有理由，否則不要這樣做。

Answer 2

在：

$(document).ready(function() {
    $('#popup').click(partial(coolTransition, $(this)));
});

$(this)是$(document) 。 您需要$(this)來接受$('#popup')的上下文，為此，您需要一個函數：

$(document).ready(function() {
    $('#popup').click((function() {
       return partial(coolTransition, $(this));
    })());
});

或者，您可以完全避免$(this) ：

$(document).ready(function () {
    var $elm = $('#popup');
    $elm.click(partial(coolTransition, $elm));
});

實際上， partial整個用法似乎過於復雜。 為什么您認為自己需要它？ 最簡單的方法是：

$(document).ready(function() {
    $('#popup').click(function() {
       coolTransition($(this));
    });
});