重复按钮不会更改其文本答案

【问题标题】：Duplicated button doesnt change its text重复按钮不会更改其文本
【发布时间】：2014-06-23 08:56:39
【问题描述】：

我正在实现一个井字游戏，但是有一个特殊的规范，当我按下一个按钮时，它会打开一个新的游戏 DIV 并禁用旧的 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>

【问题讨论】：

请把这个放在 JS fiddle 中并显示输出？？
您正在使用 event 获取目标，因为您没有传递给事件的变量！
这个“特殊规范”的目的是什么？
重复 ID ????
jsfiddle.net/KXp4D/120 你想从这个告诉 ???现在告诉我？？？

标签： jquery html css jscript

【解决方案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

【讨论】：