帶參數的onclick函數

我正在創建一個應用程序，允許用戶通過單擊按鈕來更改圖像。該應用程序具有加載的默認圖像，並且我希望能夠在每次點擊按鈕時交換圖像。我有這個工作，但我必須爲每個按鈕項目創建一個新的功能。像這樣：帶參數的onclick函數

<ul> 
     <li><a href="#" onclick="change1()">name of image 1</a></li> 
     <li><a href="#" onclick="change2()">name of image 2</a></li> 
     <li><a href="#" onclick="change3()">name of image 3</a></li> 
     <li><a href="#" onclick="change4()">name of image 4</a></li> 
    </ul> 

<script> 
function change1(){ 
     document.name1.src = document.differntImage.src 
     return; 
     } 

function change2(){ 
     document.name1.src = document.defaultImage.src 
     return; 
     } 

function change3(){ 
     document.name1.src = document.image3.src 
     return; 
     } 

function change4(){ 
     document.name1.src = document.image4.src 
     return; 
     } 
</script>

有沒有辦法編寫1個函數來完成所有這些並在onclick中傳遞一個參數？像這樣：

onclick="change(1)" 
onclick="change(2)" 
onclick="change(3)" 
onclick="change(4)"

來源

2016-04-16 codeKracken

使用'數據 - *'屬性... – Rayon

這個怎麼樣？ fiddle

<div class="main"><img id="name1" src="https://dummyimage.com/100x100/&text=name1"></div> 
<ul> 
    <li><a href="#" onclick="change(1)">name of image 1</a></li> 
    <li><a href="#" onclick="change(2)">name of image 2</a></li> 
    <li><a href="#" onclick="change(3)">name of image 3</a></li> 
    <li><a href="#" onclick="change(4)">name of image 4</a></li> 
</ul> 
<div>differntImage <img id="differntImage" src="http://dummyimage.com/100x100/&text=differntImage"></div> 
<div>defaultImage <img id="defaultImage" src="http://dummyimage.com/100x100/&text=defaultImage"></div> 
<div>image3 <img id="image3" src="https://dummyimage.com/100x100/&text=image3"></div> 
<div>image4 <img id="image4" src="https://dummyimage.com/100x100/&text=image4"></div> 

<script> 
    function change(id) { 
    var idList = [ 
     'differntImage', 
     'defaultImage', 
     'image3', 
     'image4' 
    ]; 
    var target = document.getElementById('name1'); 
    var selected = document.getElementById(idList[id-1]); 
    target.src = selected.src; 
    return false; 
    }; 
</script>

來源

2016-04-16 19:29:21 GeckoTang

這似乎這樣的伎倆，但有什麼辦法，我可以用「名」選擇acheive相同的結果，而不是如果「身份證」選擇？我嘗試了一下編輯你的代碼，但無法使它工作。我確定我缺少一些簡單的東西。 https://jsfiddle.net/xaav676h/ – codeKracken

你爲什麼使用'name'屬性？如果你想使用'name'屬性，那麼這個https://jsfiddle.net/xaav676h/1/？ – GeckoTang

這正是我所期待的。謝謝！ – codeKracken

<ul> 
    <li><a href="#" onclick="change('link1')">name of image 1</a></li> 
    <li><a href="#" onclick="change('link2')">name of image 2</a></li> 
    <li><a href="#" onclick="change('link3')">name of image 3</a></li> 
    <li><a href="#" onclick="change('link4')">name of image 4</a></li> 
</ul> 

<script> 
    function change(link) { 
     console.log(link); 
     // It prints a link that is in the function 
     document.name1.src = document.differntImage.src 
     return; 
    } 
</script>

來源

2016-04-16 19:08:58 mihkov

正如你猜，你需要（在你的例子change）的包裝函數來完成這項工作，從onclick屬性中調用。

<a onclick="change('http://some-great-image')">click meeee</a> 

function change(src){ 
    document.name1.src = src; 
}

如果你想映射一個數字與給定的URL，你需要一個對象來處理（也許是一個數組對象）。

即

<a onclick="change(1)">click meeee</a> 

var urls = [ 
    'my index 0 image', 
    document.differntImage.src, 
    'another one' 
]; 
function change(index){ 
    document.name1.src = urls[index]; 
}

這種包裝需要，當你使用純腳本的事件，如

btn1.onclick = function(){ 
     change('mi-new-url'); 
}

或者你可以搜索bind戰略做出一些鑽營是明確的。

希望它有助於更好地理解！

來源

2016-04-16 19:13:12 sminutoli

帶參數的onclick函數

回答

相關問題