Question

如何让HTML按钮像切换一样？我有两个修改图像的JS函数，一个用于新图像，另一个用于修改它。如何在第一次按下时确保按钮激活第一个功能，然后在再次按下时激活第二个功能，重复第三次和第四次等。

    document.getElementById("baseImg").src = "assets/1stImg.png";

    function imgChange1() {
      document.getElementById("baseImg").src = "assets/2ndImg.png";
    }
    function imgBack1() {
      document.getElementById("baseImg").src = "assets/1stImg.png";
    }

<img id="baseImg">

<button onclick="imgChange1()">Change</button>

如何在此按钮中包含第二个功能？

`

Answer 1

我真的不明白你的问题，因为你说“ 切换 ”，但你说的是

如何在按下时确保按钮激活第一个功能第一次，但再次按下时激活第二次？

但是，这就是你如何做到的：

var clicked = false;

function toggleBtnClick(button) {
  var img = document.getElementById('baseImg');

  if (clicked) { //this will be executed on future clicks after first click
    img.src = 'http://via.placeholder.com/350x150/4CAF50/000000';
    console.log('Next click');
    //or do something else
  } else { //this will only be executed once
    img.src = 'http://via.placeholder.com/350x150/e9e9e9/000000';
    console.log('First click');
  }
  clicked = true; //update to true after first click
}

button {
  position: absolute;
  right: 0;
}

<img id="baseImg" src="http://via.placeholder.com/350x150/3fafed/000000">
<button onclick="toggleBtnClick()">Change</button>

但是，如果您真的想要 “切换” 功能，请按以下步骤操作：

var clicked = false;

function toggleBtnClick() {
  var img = document.getElementById('baseImg');
  if (clicked) {
    img.src = 'http://via.placeholder.com/350x150/e9e9e9/000000';
    clicked = false;
  } else {
    img.src = 'http://via.placeholder.com/350x150/3fafed/000000';
    clicked = true;
  }
}

button {
  position: absolute;
  right: 0
}

<img id="baseImg" src="http://via.placeholder.com/350x150/e9e9e9/000000">

<button onclick="toggleBtnClick()">Change</button>

与JS函数切换相似的按钮

1 个答案: