javascript - jQuery函数参数为图片设置SRC

Question

如何根据参数为大量图像设置 SRC？

我有 5 个链接

<span onclick="showim('http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg');">Show Image 1</span>
<span onclick="showim('img2.jpg');">Show Image 2</span>
<span onclick="showim('img3.jpg');">Show Image 3</span>
<span onclick="showim('img4.jpg');">Show Image 4</span>
<span onclick="showim('img5.jpg');">Show Image 5</span>

只有一个图片占位符

<img src="" id="implace" width="100" />

还有，像这样的JS代码

$(document).ready(function () {
     $(function showim(imid) {
         var src = $("implace").attr("src").match(/[^\.]+/) + imid;
         $("#implace").attr("src", src);
     });
});

我怎样才能使这段代码工作？不明白为什么它不起作用。谢谢

JSFiddle 链接:http://jsfiddle.net/yessx/

Answer 1

为每个跨度放一个类，并添加属性数据:

    <span class="spanClick" data-image="http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg">Show Image 1</span>
    <span class="spanClick" data-image="img2.jpg">Show Image 2</span>
    <span class="spanClick" data-image="img3.jpg">Show Image 3</span>
    <span class="spanClick" data-image="img4.jpg">Show Image 4</span>
    <span class="spanClick" data-image="img5.jpg">Show Image 5</span>

在你的 js 中:

$(document).ready(function(){
  $(".spanClick").bind("click",function(){
      var src = $(this).data("image");

      $("#implace").attr("src",src);
  });
});

当你调用你的 jquery 文件时，不要忘记调用 jquery-migrate 文件，导致函数“bind”在所有 jquery 版本中都不起作用