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>

ただし、addsquarewhiteとaddsquare黒 が正しく機能していません。divクラスrowを持つ は正しく追加されていますが、追加している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 に答える