javascript - 多图像交换

Question

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

用户必须能够对每个编号的方 block 执行此操作。 (我有一个数学问题，我希望用户通过单击图像并将它们放在需要解方程的位置来解决)。我的思路是通过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 = '';
}