HTML表中的垂直和水平鏡像

Question

我有一個HTML表格，例如50x50。 我需要提出一種可以垂直和水平鏡像的算法。 我正在使用javascript / jquery替換表中的圖像。 垂直和水平鏡像必須彼此分開，以便可以分別激活/禁用它們。 我是編程和堆棧溢出的新手，所以如果不確定我需要提供/描述什么。 希望這個問題有意義。

這是我現在的桌子。

<table>
  <% 50.times do %>
    <tr>
      <% 50.times do %>
        <td><img src='/assets/floor_tile.png'></td>
      <% end %>
    </td>
  <% end %>
</table>

例如。 如果單擊左上方的單元格，並且水平鏡像處於打開狀態，那么右上方的單元格也會發生變化。

我當前的js，不確定是否有幫助，因為當時更多的是測試。

  // Get mouse status.
  var down = false;
  $(document).mousedown(function() {
    down = true;
  }).mouseup(function() {
    down = false;  
  });

  // Basic tile change test.
  $("img").mouseover(function(){
    var tile_to_change = this;
    if(down) {
      $(tile_to_change).attr('src', '/assets/wall_tile.png');
    } 
    else {   
    }
  });

  $("img").mousedown(function(){
    $(this).attr('src', '/assets/wall_tile.png');
  })

Answer 1

下面是完成您想要的一種方法。 我假設您在其他地方（例如通過復選框處理程序）設置了變量horizontalMirror和verticalMirror ：

// Get mouse status.
var down = false;
$(document).mousedown(function() {
  down = true;
}).mouseup(function() {
  down = false;  
});

function make_wall_tile(selector, noVertMirror) {
    selector.attr('src', '/assets/wall_tile.png');
    td = selector.parent();
    tr = td.parent();
    column = td.index("td");
    if(horizontalMirror) {
        hmirror_td = tr.children("td").get(-1-column);
        hmirror_td.attr('src', '/assets/wall_tile.png');
    }
    if(verticalMirror && !noVertMirror) {
        table = tr.parent();
        row = tr.index("tr");
        vmirrorTr = table.children("tr").get(-1-row);
        td = vmirrorTr.children("td").get(column);
        img = td.children("img");
        make_wall_tile(img, true);
    }
}

// Basic tile change test.
$("img").mouseover(function(){
  var tile_to_change = this;
  if(down) {
    $(tile_to_change).attr('src', '/assets/wall_tile.png');
  } 
  else {   
  }
});

$("img").mousedown(function(){
  $(this).attr('src', '/assets/wall_tile.png');
})

對於所需的.parent（）/。children（）的數量，我可能有點模糊，因為我認為某些瀏覽器（或者可能是標准瀏覽器）在表中添加了tbody / trow / w / e元素，但這應該可以給您基本思想。