0

我正在慢慢熟悉 Javascript，现在我有一个非常简单的问题
如果我的术语不是当场，请询问和/或纠正我

我怎样才能在同一个脚本（文件）中拥有这两个（或更多）行为。

    $(document).ready(function(){
        var $container = $('div.fillField'),
        divs = $("div.onethird").get().sort(function(){ 
                return Math.round(Math.random())-0.5;
            }).slice(0,3),
            $clonedDivs = $(divs).clone();
        $container.html('');
        $clonedDivs.each(function( index ) {
            $container.append(this);
            if (index % 3 == 0) {
              $(this).css("margin-left", "0%");
            } else {
              $(this).css("margin-left", "2%");
            }
        });

        $clonedDivs.show();

        //break & next command

        var $container = $('div.fillField'),
            divs = $("li.onethirdAll").get().sort(function(){ 
                return Math.round(Math.random())-0.5;
            }),
            $clonedDivs = $(divs).clone();
        $container.html('');
        $clonedDivs.each(function( index ) {
            $container.append(this);
           });
        $clonedDivs.show();
    });

它们分别工作正常，但将它们放在一起似乎只有最后一个正在执行

4

2 回答 2

2

第二个块中的这些代码行：

var $container = $('div.fillField');
$container.html('');

正在清除您在第一个块中所做的事情，以便div.fillField再次为空（清除您在代码的第一部分中添加的内容）。

尚不完全清楚您希望行为是什么，但也许您只想将新内容附加到容器上，而不是在第二个块中清除它。

于 2013-10-13T03:49:14.233 回答
0

假设你知道你分别在做什么是好的。

$(document).ready(function(){

        var $container = $('div.fillField'),
        divs = $("div.onethird").get().sort(function(){ 
                return Math.round(Math.random())-0.5;
            }).slice(0,3),
            $clonedDivs = $(divs).clone();
        $container.html('');
        $clonedDivs.each(function( index ) {  //this function will be called asynchronously and is using $clonedDivs and $container 
            $container.append(this);
            if (index % 3 == 0) {
              $(this).css("margin-left", "0%");
            } else {
              $(this).css("margin-left", "2%");
            }
        });

        $clonedDivs.show();

        //break & next command

        //use different variables
        var $container2 = $('div.fillField');

        var divs2 = $("li.onethirdAll").get().sort(function(){ 
            return Math.round(Math.random())-0.5;
        });

        var $clonedDivs2 = $(divs2).clone();
        $container2.html('');
        $clonedDivs2.each(function( index ) {
            $container2.append(this);
        });
        $clonedDivs2.show();
    });

请阅读 javascript 中的逗号运算符和变量声明。还阅读了关于闭包的信息。

如果您只想隔离两个不同的代码片段，请使用匿名函数。

(function(){
   //first snippet - behaviour if you may
})();

(function(){
   //second
})();
于 2013-10-13T03:56:46.337 回答