Question

我是jquery和javascripts的新手，但不是编程。我知道C和Shell一点点。

说到这一点，在我的博客中，我想在用户点击特定按钮后加载一些图像。我谷歌搜索得到一个答案，我最终在下面的stackoverflow链接。

load an image after clicking a button

我能理解脚本在做什么。但是不能按照自己的需要来制作它。

我的需要是我必须在3个不同的地方加载3个不同的图像。所以，会有三个按钮。

如果我点击按钮图像已加载，但如果我选择下一个按钮，则在所有三个区域中都会替换相同的图像（我知道它为什么会发生但不能阻止它）。< / p>

我如何制作所提到的剧本，以使图像在所有区域都是独特的？

所以，请小心一点，我会尝试自己做。

提前致谢。

Answer 1

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

HTML：

<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>

JS：

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

FIDDLE

点击不同区域后加载一些图像

1 个答案: