Question

概述：我的网站上有一个按钮，它只有一个按钮。当我单击此按钮时，它应该调用功能X.如果我再次单击此按钮，它应该调用功能Y.基本上，这是一个ON和OFF开关。这个按钮通过onclick =“function X”调用一个函数。如果再次点击，同样的onclick需要调用函数Y.我希望我说清楚。

它不能是2个单独的按钮。太容易了。有没有人有任何想法？我在语言方面唯一灵活的是html，javacript和css。任何想法欢迎。

Answer 1

您不需要多个功能。只需使用布尔值在代码的两个不同部分之间切换。

var toggle = true;
function functionX(){
    if(toggle){
        // Logic for the first click
    } else {
        // Logic for the other click
    }
    toggle = !toggle; // change the toggle for the next time the button's clicked.
}

Answer 2

有几种方法可以做到这一点：

两个按钮

<强> HTML

<button id="a" onclick="a()">Test</button>
<button id="b" onclick="b()" style="hidden">Test</button>

<强> CSS

.hidden {
  display: none;
}

<强> JS

function a() {
  var buttonA = document.getElementById('a');
  var buttonB = document.getElementById('b');
  buttonA.classList.add('hidden');
  buttonB.classList.remove('hidden');
}

function b() {
  var buttonA = document.getElementById('a');
  var buttonB = document.getElementById('b');
  buttonB.classList.add('hidden');
  buttonA.classList.remove('hidden');
}

在var

<强> HTML

<button onclick="x()">Test</button>

<强> JS

var clicked = 'b'; //initial state

function x() {
  switch(clicked) {
    case 'a':
      clicked = 'a';
      a();
    break;
    case 'b':
      clicked = 'b';
      b();
    break;
    default: throw 'unknown state';
  }
}

function a() {
  //something
}
function b() {
  //something
}

点击时重新分配监听器（使用jquery轻松）

<强> HTML

<button id="x">Test</button>

<强> JS

$(document).ready(function() {
  $('#x').click(a());
});

function a() {
  //do something then..
  $('#x').click(b);
}

function b() {
  //do something then..
  $('#x').click(a);
}

Answer 3

试试这段代码

var i = 0;

function fun() {

  if (i == 0) {
    funX();
    i = 1;
  } else {
    funY();
    i = 0;
  }

}

function funX() {
  console.log('x');
}

function funY() {
  console.log('y');
}

<button id="test" onclick="fun()">Click</button>

HTML，javascript启用禁用按钮

3 个答案: