Javascript HTML表中的垂直和水平镜像
我有一个html表格,比如50x50。我需要想出一个垂直和水平镜像的算法。我正在使用javascript/jquery替换表中的图像。垂直镜像和水平镜像必须相互分离,以便可以独立地激活/停用。我不熟悉编程和堆栈溢出,所以如果我不确定我需要提供/描述什么。希望这个问题有意义 这是我的桌子Javascript HTML表中的垂直和水平镜像,javascript,jquery,html,ruby-on-rails,Javascript,Jquery,Html,Ruby On Rails,我有一个html表格,比如50x50。我需要想出一个垂直和水平镜像的算法。我正在使用javascript/jquery替换表中的图像。垂直镜像和水平镜像必须相互分离,以便可以独立地激活/停用。我不熟悉编程和堆栈溢出,所以如果我不确定我需要提供/描述什么。希望这个问题有意义 这是我的桌子 <table> <% 50.times do %> <tr> <% 50.times do %> <td><
<table>
<% 50.times do %>
<tr>
<% 50.times do %>
<td><img src='/assets/floor_tile.png'></td>
<% end %>
</td>
<% end %>
</table>
做你想做的事情的一个方法是如下。我假设您在其他地方(例如通过复选框处理程序)设置了变量
水平镜像
和垂直镜像
:
我可能对所需的.parent()/.children()的数量有点模糊,因为我认为一些浏览器(或者可能是标准浏览器)在表中添加了tbody/trow/w/e元素,但这应该给您一个基本的想法。您需要添加一些代码来显示您试图镜像的内容(例如,单击处理程序)。然后,我们可以向您展示如何更改您必须执行的操作。如果您正在水平和垂直镜像,如果您单击左上角,它不应该激活右下角吗?如果两者都在,它将激活右上角和左下角。
// 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');
})
// 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');
})