iT邦幫忙

0

利用jQuery實現與空白相鄰格子交換位置

利用jQuery實現與空白相鄰格子交換位置
例如:cell11為預設空白,則cell12與cell21可與其交換位置。假設與cell12交換後,則與空白相鄰的為cell11、cell13與cell22,以此類推。
目前問題是當空白與cell12交換後,無法實現與cell11、cell13或cell22作交換的動作。
懇請各位高手指導,謝謝。

    <script type="text/javascript">
    $(function() {
      $(".cell").click(function() {
        $start = $("img[src='11.png']");
        $space = $start.attr("src");
        $targe = $(this).children().attr("src");
        
        $change1 = Math.abs($space.substr(0,1)-$targe.substr(0,1));
        $change2 = Math.abs($space.substr(1,1)-$targe.substr(1,1));
        $change = $change1 + $change2;
        if($change == 1) {
          $(this).children().attr("src",$space);
          $start.attr("src",$targe);
        }
      });
    });
    </script>

  
    <div>
      <table border="2">
        <tr>
          <td id="cell11" class="cell"><img src="space.png"/></td>
          <td id="cell12" class="cell"><img src="12.png"/></td>
          <td id="cell13" class="cell"><img src="13.png"/></td>
        </tr>
        <tr>
          <td id="cell21" class="cell"><img src="21.png"/></td>
          <td id="cell22" class="cell"><img src="22.png"/></td>
          <td id="cell23" class="cell"><img src="23.png"/></td>
        </tr>
        <tr>
          <td id="cell31" class="cell"><img src="31.png"/></td>
          <td id="cell32" class="cell"><img src="32.png"/></td>
          <td id="cell33" class="cell"><img src="33.png"/></td>
        </tr>
      </table>
    </div>
  

1 個回答

0
fillano
iT邦超人 1 級 ‧ 2014-06-12 10:31:43
最佳解答

建議你用一個資料結構,例如簡單的二維陣列,來跟畫面上的九宮格做對應,然後在變動時同時變動這個資料結構。在事件發生時,使用這個資料結構做判斷,這樣會比較容易做,畢竟DOM不是很好使用的資料結構。

另外,資料的位置跟內容應該是分開的,你用圖檔名稱同時當作位置的判斷,這樣一交換位置後,位置的規則不就毀了?XD

我要發表回答

立即登入回答