Question

我使用JQuery Code创建了一个动画，它将一个接一个地创建一个彩色div的柄。重要的是 - 我想重复这个功能2次，我通过再创建2个函数并按照'.then（）'的执行顺序调用它来实现。

function boxA(){
    var d = $.Deferred();
        setTimeout(function() {
        var $box = $(".ruleblk1 div");
        var n = $box.length;  
        var x=0;
        var colorval=['2a0d00','bf4e00','e2281a','ffc015','60a900'];
        $( ".ruleblk1 div" ).last().css('background','#'+colorval[0]+'').fadeTo( "1000", 1, function showNext() {           
        $( this ).prev( "div" ).css('background','#'+colorval[++x]+'').fadeTo( "1000",1, showNext);
        }); 
         d.resolve();
        },100);
    return d.promise();     
    };

它的HTML部分是

<div class="ruleblk1 blkcont">
<div>FirstBlock</div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="ruleblk2 blkcont">
<div>Second Block</div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="ruleblk3 blkcont">
<div>Third Block</div><div></div><div></div><div></div><div></div><div></div>
</div>

我的问题是我不想为每个关联的DOM元素（ruleblk2，ruleblk3等）重复相同的功能，并想为每个块动画创建一个构造函数，并创建3个函数作为构造函数的实例和传递DOM元素名称（例如.rulebl3 div）作为参数。实现这一目标的最佳方法是什么？

谢谢

面向对象的JQuery

0 个答案: