Изменение соседних ячеек в таблице, когда событие запускается в JQuery - PullRequest
Новая
       10

Изменение соседних ячеек в таблице, когда событие запускается в JQuery

0 голосов
/ 03 февраля 2010

Я пытаюсь сделать игру из света. Я могу заставить свет включаться и выключаться, когда я нажимаю на них, но у меня возникают проблемы с продумыванием логики, чтобы заставить соседний также прийти один. Например, если я щелкну по краю стола, я должен увидеть три источника света рядом с источником света, который я нажал, и он загорится. Я думаю, что, может быть, это как-то связано с границей «this» в моем методе click, может быть, «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>

Ответы [ 2 ]

0 голосов
/ 03 февраля 2010

Используйте $ (this) .next () и $ (this) .prev (), чтобы получить ссылку на следующее и предыдущее.

Вы можете использовать $ (this) .index () для полученияположение «этого» среди своих братьев и сестер;поэтому используйте что-то вроде следующего для 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);
0 голосов
/ 03 февраля 2010

Наверное, самое простое - взглянуть на http://jqueryminute.com/finding-immediately-adjacent-siblings/, если вам нужны только братья и сестры. Если вам нужна вся строка, то вы можете использовать parent, чтобы выбрать родительский элемент ячейки, которая должна быть строкой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...