变量不适用于在 jQuery 中创建的 div答案

【问题标题】：Variable not working on div created in jQuery变量不适用于在 jQuery 中创建的 div
【发布时间】：2018-06-06 11:29:11
【问题描述】：

这是一个运行良好的简单代码，但我想弄清楚如何为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/

【问题讨论】：

标签： javascript css variables dynamic global

【解决方案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)

【讨论】：

【解决方案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

【讨论】：