带参数的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函数

回答

相关问题