用一次点击替换两个图像的SRC

Question

我正在尝试做比我习惯的稍微复杂一些的事情，我希望你们能帮助我解决这个问题......我正在开发的网站需要这个类型的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 

Answer 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样式表，不使用内联样式。