Question

我正在努力打造一场灯光游戏。当我点击它们时，我可以让灯光打开和关闭，但是我在思考逻辑以使相邻的灯光也是如此。例如，如果我点击桌子的边缘，我应该看到我点击的灯光旁边的三个灯光，变亮。我想也许它与我的点击方法中的“this”界限有关，也许“this”仅引用我点击的那个而不是相邻的那个。我需要知道，或许如何让它引用相邻的？

 <html>
    <head>
        <title>Lights Out!</title>
        <script type="text/javascript" src="jquery-1.4.js"></script>

        <script type= "text/javascript">

        var gameBoard = new Array(getTdCount())




        function lightStatus(position)
        {
            //if light is on
            if(gameBoard[position] ==true)
            {
                //set the original status back to false
                gameBoard[position] = false;
                return false                
            }

            //turn on light
            gameBoard[position]=true;
            return gameBoard[position]
        }



        function getTdCount()
        {
            return $("td").length;
        }

        function getTrCount()
        {
            return $("tr").length;
        }


        function switchLights( obj, num )
        {
            if(lightStatus(num))
                {

                    $("img", obj).attr('src', 'on.png')
                }
                else
                {
                    $("img", obj).attr('src', 'off.png')
                }



        }


        $(document).ready(function()
        {

            $("#board tr td").hover(function()
            {
                $(this).css('border-color', '00FFCC');
            },
            function()
            {
                $(this).css('border-color', 'black')
            })

            var $offProtoType = $('#offprototype').css('display', 'block').removeAttr('id')     
            $('td').append($offProtoType)

            $tds = $('#board tr td');
            $tds.click(function()
            {
                var num = $tds.index(this) + 1; 


                    switchLights(this, num)

            })

        });


        </script>

        <style type="text/css">
        td
        {
            border-style:solid;
            border-color:black;
            background-color:black;
            float:left;
        }

        body
        {
            background-color: grey;
            color: green;
        }


        </style>


        </head>
        <body>

        <img style = "display:none" id="offprototype"  src ="off.png">
        <img style = "display:none" id="onprototype"  src ="on.png">

        <h1 align="center">Lights Out<h1>

        <table id="board" border="3" bgcolor="black"  align="center">
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
        <input type="button" value="Shuffle" onclick="change()"/>
        </body>
    </html>

Answer 1

如果你只想要兄弟姐妹，可能最容易做的就是看看http://jqueryminute.com/finding-immediately-adjacent-siblings/。如果你想要整行，那么你可以使用parent来选择应该是行的单元格的父元素。

Answer 2

使用$（this）.next（）和$（this）.prev（）来获取对下一个＆amp;的引用。前。

您可以使用$（this）.index（）来获取其兄弟姐妹中“this”的位置;所以在abobe及以下使用类似下面的内容。

var pos = $(this).index();
var prevRow = $(this).parent().prev('tr');
var above = prevRow && prevRow.children().slice(pos);
var nextRow = $(this).parent().next('tr');
var below = prevRow && prevRow.children().slice(pos);

在JQuery中触发事件时更改表中的相邻单元格

2 个答案: