Question

我正在实施一个tic tac toe游戏，但有一个特殊的规格，当我按下一个按钮它打开一个新的游戏DIV并禁用旧的按钮按下按钮必须在DIV等改变，但当我点击按钮它改变了原来的div不是我希望它更新的那么任何帮助？谢谢你。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .xo {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        background-color: #F03;
        height: 300px;
        width: 310px;
        text-transform: capitalize;

    }
    .btn {
        background-color: #0C9;
        height: 100px;
        width: 100px;
    }
    </style>
    <script>
    var c = new Number(); 
    c=0;
    i=0;
    var toPlay = 0;

    var name = "xo"+c;

    $(document).ready(function() {

        $(document).on('click','.btn',function(){
            alert(name);
            var id = event.target.id;
            if(c%2===0){
            $("#"+id).attr("value","X");
            $("#"+id).attr("disabled", "disabled");
            }
            else if(c%2!==0){
                $("#"+id).attr("value","O");
            $("#"+id).attr("disabled", "disabled");
            }


            newDiv = document.createElement("div");
            newDiv.className="xo";
            var $copy =$("#"+name).html();
            document.getElementById(name).appendChild(newDiv);
                    var allChildNodes = document.getElementById(name).getElementsByTagName('*');
    for(var i = 0; i < allChildNodes.length; i++)
    {
       allChildNodes[i].disabled = true;
    }   
            c++;
            name = "xo"+c;
            alert(name);
            newDiv.id=name; 
            toPlay++;
            $("#"+name).html($copy);


        });

    });

    </script>
    </head>

    <body>

    <div class="xo" id="xo0">
        <input type="submit" class="btn" name="1" id="1" value="Submit" />
        <input type="submit" class="btn" name="2" id="2" value="Submit" />
        <input type="submit" name="3" class="btn" id="3" value="Submit" />

        <input type="submit" name="3" class="btn" id="4" value="Submit" />
        <input type="submit" name="3" class="btn" id="5" value="Submit" />
        <input type="submit" name="3" class="btn" id="6" value="Submit" />

        <input type="submit" name="3" class="btn" id="7" value="Submit" />
        <input type="submit" name="3" class="btn" id="8" value="Submit" />
        <input type="submit" name="3" class="btn" id="9" value="Submit" />

    <br></br>
    </div>
    </body>
    </html>

Answer 1

问题是重复的ID。 ID 必须是唯一的使用类。

<强>的jQuery

    var id = this.id;
    if (c % 2 === 0) {
        $("." + id).val("X");
        $("." + id).prop("disabled", true);
    } else if (c % 2 !== 0) {
        $("." + id).val("O");
        $("." + id).prop("disabled", true);
    }

<强> HTML

    <input type="submit" class="btn 1" name="1" id="1" value="Submit" />
    <input type="submit" class="btn 2" name="2" id="2" value="Submit" />
    <input type="submit" name="3" class="btn 3" id="3" value="Submit" />

    <input type="submit" name="3" class="btn 4" id="4" value="Submit" />
    <input type="submit" name="3" class="btn 5" id="5" value="Submit" />
    <input type="submit" name="3" class="btn 6" id="6" value="Submit" />

    <input type="submit" name="3" class="btn 7" id="7" value="Submit" />
    <input type="submit" name="3" class="btn 8" id="8" value="Submit" />
    <input type="submit" name="3" class="btn 9" id="9" value="Submit" />

DEMO

重复按钮不会更改其文本

1 个答案: