如何重複使用JavaScript來切換圖像

Question

我有一個網頁上的幾個簡單的按鈕，其中的OnClick一個小腳本會改變圖像顯示的源來源，但是我一直在尋找這一點，以爲我重新一遍又一遍地編寫相同的代碼，但我無法弄清楚如何改變形象，而不在一個新的功能指定SRC =「X.jpg」找到新的文件每一次，也許有更好的解決辦法？

這裏就是我這麼遠。

<article class="large-text-area"> 
     <button onclick="myFunction1()">Click Here to view image</button> 

     <script> 
     function myFunction1() { 
     document.getElementById("theImage").src = "../media/img/sketch/strip1.jpeg" 
     } 
     </script> 
    </article> 

    <!-- Section 2 --> 
    <article class="large-text-area"> 
     <button onclick="myFunction2()">Click Here to view image</button> 

     <script> 
     function myFunction2() { 
     document.getElementById("theImage").src = "../media/img/sketch/strip2.jpeg" 
     } 
     </script> 
    </article> 

    <!-- Section 3 --> 
    <article class="large-text-area"> 
     <button onclick="myFunction3()">Click Here to view image</button> 

     <script> 
     function myFunction3() { 
     document.getElementById("theImage").src = "../media/img/sketch/strip3.jpeg" 
     } 
     </script> 
    </article> 

任何建議將是有益的，謝謝！

Answer 1

我認爲你正在尋找沿着單一功能的符合正確的源更新圖像的東西，對不對？

function changeImgSrc(imageId) { 
 
\t document.getElementById("theImage").src = "../media/img/sketch/strip" + imageId + ".jpeg"; 
 
}

<img id="theImage" src=""/> 
 

 
<!-- Section 1 --> 
 
<article class="large-text-area"> 
 
    <button onclick="changeImgSrc('1')">Click Here to view image</button> 
 
</article> 
 

 
<!-- Section 2 --> 
 
<article class="large-text-area"> 
 
    <button onclick="changeImgSrc('2')">Click Here to view image</button> 
 
</article> 
 

 
<!-- Section 3 --> 
 
<article class="large-text-area"> 
 
    <button onclick="changeImgSrc('3')">Click Here to view image</button> 
 
</article>

這是使用一個開關可能是最好的做法。

function changeImgSrc(imageId) { 
 
    var imgSrcValue; 
 
    
 
    switch (imageId) { 
 
     case 1: 
 
     imgSrcValue = "../media/img/sketch/strip1.jpeg"; 
 
     break; 
 
     case 2: 
 
     imgSrcValue = "../media/img/sketch/strip2.jpeg"; 
 
     break; 
 
     case 3: 
 
     imgSrcValue = "../media/img/sketch/strip3.jpeg"; 
 
     break; 
 
    } 
 
    
 
    document.getElementById("theImage").src = imgSrcValue; 
 
}

<img id="theImage" src=""/> 
 

 
<!-- Section 1 --> 
 
<article class="large-text-area"> 
 
    <button onclick="changeImgSrc(1)">Click Here to view image</button> 
 
</article> 
 

 
<!-- Section 2 --> 
 
<article class="large-text-area"> 
 
    <button onclick="changeImgSrc(2)">Click Here to view image</button> 
 
</article> 
 

 
<!-- Section 3 --> 
 
<article class="large-text-area"> 
 
    <button onclick="changeImgSrc(3)">Click Here to view image</button> 
 
</article>