在 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 returns 一个函数

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

现在将您的点击更改为此

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

此时您的代码应该可以正常工作。

将来您可以将 clickFunction 分配给其他一些函数，例如

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

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

HTH

在 jQuery 中创建的 div 变量不起作用

Variable not working on div created in jQuery

javascript

css

variables

global

dynamic