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 = '';
}

多个图像交换

1 个答案: