0

我正在使用 java-query 在页面加载时生成棋盘：

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

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

然后我在 head 中调用一个脚本：

<script> addrows() </script>

但是， theaddsquarewhite和addsquareblack 无法正常运行：我div的 s with classrow被body正确添加，但是我添加的所有方块都被聚集到最后一个div. 我认为它们只会被添加到div方法调用时最后一个可用的位置。显然，我对 javascript 中的范围/流程一无所知。请赐教。
谢谢！

4

1 回答 1

1

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

演示：小提琴

于 2013-07-09T13:29:34.713 回答