【问题标题】：Replace SRCs of Two Images with One Click一键替换两张图片的SRC
【发布时间】：2012-09-18 18:46:42
【问题描述】：

我正在尝试做一些比我习惯的稍微复杂的事情，我希望你们能帮助我完成这个...我正在开发的网站需要这种类型的 Psudo

<script>
function FirstPic(){
        document.titlepic.src = document.rep1.src
        return
    }

function SecPic(){
        document.submitpic.src = document.rep2.src
        return
    }
</script>

// Calling Image Replacements
<img style="visibility:hidden;width:0px;height:0px;" name="rep1" src="title2.gif>
<img style="visibility:hidden;width:0px;height:0px;" name="rep2" src="submit2.gif>
// End of Calling Image Replacements

// Output Area
<img src="title.gif" name="titlepic">

<input type="radio" onclick="FirstPic();SecPic();updateProductPrice(this);parent.specs.location='<?php echo $options_item['base_var'] ?>.htm';">

<img src="submit.gif" name="submitpic">
// End of Output Area

【问题讨论】：

可以使用jQuery吗？它不是visability。它是visibility。

标签： javascript image replace src

【解决方案1】：

您只需单击一下即可替换任意数量的图像来源。还有一个函数，你不需要为每张图片一个函数。

demo

HTML：

<img src='source-img-1.jpg' class='s'>
<!-- as many source images as you would like -->
<button id='replace'>Replace</button>
<img src='destination-img-1.jpg' class='d'>
<!-- as many destination images as you have source images -->

JavaScript：

var r = document.getElementById('replace');

r.addEventListener('click', function(){
  var s = document.querySelectorAll('.s'),
      d = document.querySelectorAll('.d'), 
      l = s.length;
  if(d.length != l) return;
  for(var i = 0; i < l; i++) d[i].src = s[i].src;
}, false);

另外，使用 CSS 样式表，不要使用内联样式。

【讨论】：