Javascript 在不同区域单击后加载一些图像

我不熟悉jquery和javascripts，但不熟悉编程。我对C和Shell有点了解

说到这里，在我的博客中，我想在用户点击特定按钮后加载一些图像。我在谷歌上搜索得到了答案，结果出现在下面的stackoverflow链接中

我能理解剧本在做什么。但我不能根据自己的需要来制作

我的需要是我必须加载3个不同的地方3个不同的图像。因此，将有三个按钮

如果我点击按钮，图像会被加载，但如果我点击下一个按钮，在所有三个区域，相同的图像会被替换（我知道为什么会发生，但无法阻止）

我怎样才能精心制作上面提到的脚本，使图像在所有区域都是不同的

所以，给我一个建议，我会试着自己去做

---

提前感谢。

为了将来更好地搜索答案：

HTML:

点击！
点击
点击

JS:

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var imgUrl=$（this.data（'rel'）；
$（this.next（）.html（“”）；
});
});

---

请显示您的代码：）（以及您的HTML/布局）您到目前为止尝试了什么？你能像那样把代码放进去吗@vicke4 you's welcome=）@deadulya您已经给出了我真正需要的正确解决方案。刚才我找到了一个使用w3schools教程的解决方案，它定义了不同的类，而不是“this”和“button”。但你的解决方案真的很酷。另一个帮助，是否有任何方式来说明图像的加载过程？点击按钮后，直到加载完整图像所需的时间，沙钟开始旋转…你注意到我之前的评论了吗？？有什么方法可以说明加载过程吗？是的，问题已经解决了。检查：谢谢链接，我会自己尝试。如果我不能，我会请求你的帮助…：）有什么问题吗？？？请随意问任何=）在我们的示例中，会有一些类似于你太棒了。你节省了我的时间…：）最后一个也是最后一个问题显示加载过程中是否有任何变化。。。。？？

<button data-rel="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png">Click!</button>
<div id="area1"></div>
<button data-rel="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg">Click!</button>
<div id="area2"></div>
<button data-rel="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg">Click!</button>
<div id="area3"></div>

$(document).ready(function(){
  $("button").click(function(){
    var imgUrl = $(this).data('rel');
    $(this).next().html("<img src='" + imgUrl + "' alt='description' />");
  });
});