Question

我慢慢熟悉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();
    });

另外它们工作正常但是将它们放在一起似乎只有最后一个被执行

Answer 1

第二块中的这些代码行：

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

正在清除您在第一个块中执行的操作，以便div.fillField再次为空（消除您在代码的第一部分中添加的内容）。

您想要的行为并不完全清楚，但也许您只是想将新内容添加到容器中而不是在第二个块中清除它。

Answer 2

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

$(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
})();

了解jquery事件切换

2 个答案: