用一次點擊替換兩個圖像的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樣式表，不使用內聯樣式。