Question

我正在创建一个应用程序，允许用户通过单击按钮更改图像。应用程序具有加载的默认图像，我希望能够在每次单击按钮时交换图像。我有这个工作，但我必须为每个按钮项创建一个新功能。像这样：

    <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)"

Answer 1

这个怎么样？ 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>

Answer 2

<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>

Answer 3

正如您所猜测的那样，您需要一个包装函数（在您的示例中为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策略以进行一些讨论。

希望有助于更好地理解！

带参数的onclick函数

3 个答案: