多图像交换

Question

我有 10 张空白黑色方块的图像。在它们下面，我有 10 个标记为 0-9 的黑匣子。我的目标是让用户点击一个编号的方块，然后选择他想要放置的空白方块。

用户必须能够对每个编号的正方形执行此操作。 （我有一个数学问题，我希望用户通过单击图像来解决，并将它们放在他们需要去解决方程的地方）。我的思路是通过getElementId获取点击的图片，并将其存储到变量中，然后继续处理。

我不确定这是否可能。我的想法是“单击图像，识别单击的内容，将其存储在临时变量保持器中，然后与单击的第二个（空白）图像交换）。

我的 HTML：

这些是 0-9 的空白图像：

<img src="blank.jpg" id="blank0" onclick="swap()" width="30" height="30">  </button>
<img src="blank.jpg" id="blank1" onclick="swap()" width="30" height="30">  </button>

等等。等等。

这些是编号的图像：

<img src="0.jpg" id="0" onclick="" width="30" height="30">  </button>
<img src="1.jpg" id="1" onclick="" width="30" height="30">  </button>

等等

Answer 1

试试这样的：

（所有 JS 的顶部）：

var holder = '';
var holderId = '';

然后将其添加到编号图像中：

<img src="0.jpg" id="number0" onclick="setHolder(this.src,this.id)" width="30" height="30">

这个空白：

<img src="blank.jpg" id="blank0" onclick="swapHolder(this)" width="30" height="30">

然后像这样创建两个函数：

function setHolder(src,id) {
    holder = src;
    holderId = id;
}

function swapHolder(img) {
    img.src = holder;
    document.getElementById(holderId).src = 'blank.jpg';
    holder = '';
    holderId = '';
}