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

【问题标题】：Changing adjacent cells in table when an event is triggered in JQuery在 JQuery 中触发事件时更改表格中的相邻单元格
【发布时间】：2010-02-03 03:23:28
【问题描述】：

我正在尝试制作熄灯游戏。当我点击它们时，我可以让灯打开和关闭，但我很难想出逻辑来让相邻的灯也变成一个。例如，如果我单击桌子的边缘，我应该看到与我单击的灯相邻的三个灯亮起。我在想也许它与我的点击方法中绑定的“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>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

使用 $(this).next() 和 $(this).prev() 获取对下一个和上一个的引用。

您可以使用 $(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);

【讨论】：

【解决方案2】：

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

【讨论】：