Question

所以我正在做这个学校项目。而且我坚持使用主要逻辑。我正在做一个Checkers游戏。我拿到了所有棋盘和棋盘件，问题在于它的运动。

基本上，我只是想要它，这样当我单击// td //中的图像并点击另一个// td //时，图像会移动或转移到新的// td //。我使用了// td //的ID属性，因为朋友建议也许我可以从那里开始。

非常感谢：）

    <html>
    <head>
    <style>

        body { background-color: #D1CDDF; }

        p { font-family: Verdana, Geneva, sans-serif;
            font-size:  30; }

        img { width: 35px;
              height: 35px; }

        label { font-family: "Lucida Console", Monaco, monospace;
                font-size: 15; }

        .focused{ border: 2px solid yellow; }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>


        function saveScore() {
            // syntax: $.post(URL,data,callback);
            $.post("scores.php",
            {
                TheFile: $("#filename").val(),
                TheMessage: $("#winner").val() + "\r\n"
            }
            ,function(dataFromtheServer) {
                $("#result").html(dataFromtheServer);
            });
        }



        function openBoard()
        {   
            $(document).ready(function()
            {
                var p1Name = document.getElementById("p1name").value;
                var p2Name = document.getElementById("p2name").value;

                var heading = "<center><p><font color=\"#cc33ff\">" + p1Name + " vs " + p2Name + "</font></p></center>";

                var table = $('<table width=500px cellspacing=0px cellpadding=0px border=1px ></table>');
                var rc;

                var picName;
                var picName2;

                for( y = 1; y <= 8; y++ )
                {
                    var row = $('<tr></tr>');

                    for ( var x = 1; x <= 8; x++)
                    {
                        rc = y + x;

                        // creating the images
                        picName = "p" + 1 + ".png" ;
                        var pic1 = $('<img>').attr('src',picName);

                        picName2 = "p" + 2 + ".png";
                        var pic2 = $('<img>').attr('src',picName2);

                        if(rc % 2 === 0)
                        {
                            if(y === 1 || y === 2 || y === 3)
                            {
                                var col1 = $('<td align=center height=50px width=50px bgcolor=#4E9660 ></td>').attr('id',y + '-' + x);

                                col1.html(pic1);

                                row.append(col1);  
                            }
                            else if(y === 6 || y === 7 || y === 8)
                            {
                                var col2 = $('<td align=center height=50px width=50px bgcolor=#4E9660 ></td>').attr('id',y + '-' + x);

                                col2.html(pic2);

                                row.append(col2);
                            }
                            else
                            {
                                var col3 = $('<td align=center height=50px width=50px bgcolor=#4E9660 ></td>').attr('id',y + '-' + x);

                                row.append(col3);
                            }
                        }
                        else
                        {
                            var col4 = $('<td align=center height=50px width=50px bgcolor=#C4C160 ></td>').attr('id',y + '-' + x);

                            row.append(col4);
                        }
                    }

                table.append(row);

                }

                document.getElementById("bBoard").style.visibility = "hidden";
                $('#board').append(heading);
                $('#board').append(table);


                $(function()
                {
                    $('img').click(function()
                    {
                        $('img').removeClass('focused');
                        $(this).addClass('focused');

                        $(this).setPosition()
                    });
                });

            });
        }

    </script>
</head>
<body>

    <center>
    <p>~Checkers~</p>
    <table border=1 cellpadding=25px>
        <tr><td><label>Player 1: <input type=text id=p1name /></label><br/><br/>
                <label>Player 2: <input type=text id=p2name /></label><br/><br/>
                <button id="bBoard" onclick="openBoard();">Start Game</button><br/><br/></td>
        <td><div class="b" id="board"></div></td>
        <td>
            <input type=hidden id=filename value="players.txt" />
            <label>Register Winner: <input type=text id=winner /></label><br/><br/>
            <button id="bReg" onclick="saveScore();">Submit</button><br/><br/>
            <div id="result"></div>    
        </td>
        </td></tr>
    </table>
    </center>

</body>

Answer 1

您需要做的就是在问题中获取对img元素的DOM引用，然后在.appendChild(thatImgElement)上调用它应该移动到的td。

这是一个简单的例子：

＆＃13;

// Get reference to image to be moved
var img = document.getElementById("checkmark");
  
img.addEventListener("click", function(){
  // Get reference to target container
  var rightCell = document.getElementById("right");
  
  // Move image into target
  rightCell.appendChild(this);
});

＆＃13;

table { width:300px; height:50px; }
table,td { border: 1px solid black; }
td { width: 50%; }
img { width:30px; }

＆＃13;

<table>
  <tr>
    <td id="left"><img id="checkmark" src="https://i.stack.imgur.com/hyKmt.jpg"></td>
    <td id="right"></td>
  </tr>
</table>

＆＃13;

在同一个表上将图像从一个移动到另一个

1 个答案: