在JQuery中觸發事件時更改表中的相鄰單元格

我正在嘗試製作燈光遊戲。當我點擊它們時，我可以打開和關閉燈光，但是我很難想出邏輯來使相鄰的燈光也一樣。例如，如果我點擊桌子的邊緣，我應該看到與點擊的燈光相鄰的三個燈光變亮。我在想，也許它與我的點擊方法中的「this」邊界有關，也許「this」只是引用我點擊的那個，而不是相鄰的那個。我需要知道，也許如何讓它參考相鄰的？在JQuery中觸發事件時更改表中的相鄰單元格

<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>

來源

2010-02-03 Steffan

使用$（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);

來源

2010-02-03 03:46:30

如果你只想要兄弟姐妹，最簡單的方法就是看http://jqueryminute.com/finding-immediately-adjacent-siblings/。如果你想要整行，那麼你可以使用parent來選擇應該是行的單元格的父元素。

來源

2010-02-03 03:32:11 stimms

在JQuery中觸發事件時更改表中的相鄰單元格

回答

相關問題