函数调用顺序

我使用Java的查询生成页面加载一个棋盘：函数调用顺序

基本上我有一个空的身体：

<body> 
</body>

然后我有以下的javascript链接：

var addsquareblack=function(i,row){$(document).ready(function(){ 

    var square=$('<div class="square"></div>'); 
    if ((i%2)===0) 
     {square.css('background-color','brown');} 
    $('.row').last().append(square); 
});}; 

var addsquarewhite=function(i,row){$(document).ready(function(){ 

    var square=$('<div class="square"></div>'); 
    if ((i%2)===0) 
     {square.css('background-color','white');} 
     else 
     {square.css('background-color','brown');} 
    $('.row').last().append(square); 
});}; 

var create=function(a){$(document).ready(function(){ 
    var row=$('<div class="row"></div>'); 
    $('body').append(row); 
    if ((a%2)===0) 
    {for(var i=1;i<9;i++){addsquareblack(i,row);}} 
    else 
    {for(var i=1;i<9;i++){addsquarewhite(i,row);}} 
});}; 

var addrows=function(){ 
    for(var i=1;i<9;i++){create(i);} 
    };

然后我在脚本中调用头：

<script> addrows() </script>

然而，addsquarewhite和addsquare黑不正常：我div s的row类被添加到body正确，但随后，我加入的平方越来越编成的最后div。我认为他们只会被添加到方法调用时可用的最后一个div。很明显，我不明白JavaScript中的范围/流量。请指教。
谢谢！

来源

2013-07-09 kempchee

第一眼看上去，你是如何使用的document.ready是错误的，它应该像http://jsfiddle.net/arunpjohny/ axsvL/1/ –

我强烈建议你在css（或者sizzle）中使用'：odd'和'：even'伪类，追加64个div并使用style来为每个'-nth（8n）'元素创建一个新行 – fcalderan

阿伦：是的，它修复了它。在每个单独的函数中使用document.ready会产生问题。 – kempchee

而且你对ready处理程序的用法是错误的

这是因为你要添加的元素square到最后一行，而不是一行。

$('.row').last().append(square)

代替

var addsquareblack=function(i,row){ 
    var square=$('<div class="square">1</div>'); 
    if ((i%2)===0) { 
     square.css('background-color','brown'); 
    } 
    row.append(square); 
}; 

var addsquarewhite=function(i,row){ 
    var square=$('<div class="square">2</div>'); 
    if ((i%2)===0) { 
     square.css('background-color','white'); 
    } else { 
     square.css('background-color','brown'); 
    } 
    row.append(square); 
}; 

var create=function(a){ 

    var row=$('<div class="row"></div>'); 
    $('body').append(row); 
    if ((a%2)===0) { 
     for(var i=1;i<9;i++){ 
      addsquareblack(i,row); 
     } 
    } else { 
     for(var i=1;i<9;i++){ 
      addsquarewhite(i,row); 
     } 
    } 

}; 

var addrows=function(){ 
    for(var i=1;i<9;i++){ 
     create(i); 
    } 
}; 
$(document).ready(function(){ 
    addrows(); 
});

演示：Fiddle

来源

2013-07-09 13:29:34

这也适用;我应该删除我的函数的第二个参数，因为我已经通过将变量行传递给add ...函数来实现它的工作。我正在寻找一种方法来让它工作，而不必传递该变量。但修复我使用document.ready已经完成了！谢谢 – kempchee

函数调用顺序

回答

相关问题