变量不工作在jQuery中创建的div

Question

这是一个很好的简单代码，但我想弄清楚如何为novy.fadeIn(2000)设置变量。例如，有一天我的js文件有300行，我想从一个地方改变变量 - > fadeIn到fadeOut或类似的东西。

    var novy = $('<div/>', {id:'namaste'});
            var text = {textAlign : 'center', color : '#fff', fontSize: 'xx-large'}
   // var example = novy.fadeIn(2000) this is not working
        novy.appendTo('body').text('this code is .ITCHI.').css(text).hide();

        $(document).on('click', function(){
            novy.fadeIn(2000); // example;
        })

为了更好的观点，请看这里：https://jsfiddle.net/t305qap2/

Answer 1

你给出的例子对我来说有点牵强，但要实现你的要求，你可以做以下两件事之一：

在专用函数中包含公共代码

var fade = function (element, duration) {
    element.fadeIn(duration);
}

这将让您调用fade(novy, 2000)并根据需要交换底层动画调用。

将函数而不是结果存储在变量中 你看，var example = novy.fadeIn(2000)不起作用的原因是因为它存储了在该元素上调用fadeIn的结果，这是元素本身。 fadeIn仅仅具有动画的副作用。如果要存储对函数的引用而不是结果，JS允许这样做。看这里：

var novyFader = novy.fadeIn // typeof novyFader === 'function' => true
novyFader.call(novy, 2000)

Answer 2

您希望将该行分配给函数并将其存储为变量。然后，您可以在将来将该功能更改为其他值

所以创建一个这样的clickFunction，返回一个函数

var clickFunction = function() { return function(){novy.fadeIn(2000);} }

现在将您的点击更改为此

$(document).on('click', clickFunction);

此时您的代码应该工作相同。

将来你可以将clickFunction分配给其他一些函数

clickFunction = function() { return function() {novy.fadeOut(2000);} }

但是您可能还需要再次设置document.on回调

HTH