Question

是否可以从按钮使用相同的onClick使其成为“切换”？

我有一个按钮，<button>Toggle</button>并且基本上切换它应该执行toggleOn()或toggleOff()。

如何仅使用onClick属性执行此操作？

Answer 1

你需要保持一些关于按钮是否是＆＃34; on＆＃34;的状态。或＆＃34;关闭＆＃34;。我会通过在buttonState变量上创建一个闭包来实现这个目的：

＆＃13;

const setText = ( text ) => () => {
    document.getElementById('toggled').innerHTML = text;
};

const toggleOff = setText('off');
const toggleOn = setText('on');

const makeClickhandler = () => {
        let buttonState = false;
        return () => {
            buttonState ? toggleOff() : toggleOn();
            buttonState = !buttonState;
        }
    };
    
document.getElementById('yourbuttonid').addEventListener('click', makeClickhandler());

＆＃13;

<button id='yourbuttonid'>Toggle</button>
<span id='toggled'>off</span>

＆＃13;

Answer 2

这是一个简单的＆＃34;切换器＆＃34;高阶函数：

function toggler(fn1, fn2) {
  var toggled = true;
  return function () {
    toggled = !toggled;
    return (toggled ? fn1 : fn2).apply(this, arguments);
  }
}

function logToConsole (e) {
  console.log(this, e);
}

function logToAlert (e) {
  alert(e);
}

var toggledLog = toggler(logToConsole, logToAlert);

现在使用参数和上下文运行toggledLog将正常工作。您可以在onClick处理程序中使用它。

Answer 3

我可以想象不同的方法来实现它。

首先想到的是：

＆＃13;

var button = document.getElementById('toggle');
var state = document.getElementById('current-state');

button.addEventListener("click", toggleState);

function toggleState() {
  if ( button.dataset.state == "on" ) {
    button.dataset.state = "off";
    state.innerHTML = "I'm off"; 
  } else {
    button.dataset.state = "on";
    state.innerHTML = "I'm on"; 
  }
}

＆＃13;

<button id="toggle" data-state="off">Toggle me!</button>

<div id="current-state">I'm off</div>

＆＃13;

Answer 4

Alex Young的一种类似但稍微紧凑的方法：

＆＃13;

function toggleOn() {
  console.log( 'on' );
}

function toggleOff() {
  console.log( 'off' );
}

var button = document.getElementById( 'button' );

button.addEventListener( 'click', function clickToggle() {
  clickToggle.state = !clickToggle.state;
  clickToggle.state ? toggleOn() : toggleOff();
} );

＆＃13;

<button id="button">Toggle</button>

＆＃13;

这使用了这样一个事实：您可以通过这种方式将属性附加到命名函数。我不确定具体的术语是什么。

要解决Joe Frambach在评论中提到的有效问题，您可以将其更改为：

button.addEventListener( 'click', function clickToggle() {
  clickToggle.state = !clickToggle.state;
  return ( clickToggle.state ? toggleOn : toggleOff ).apply( this, arguments );
} );

一键启动切换功能？按下按钮 - ＆gt; toggleOn（），再按一次 - ＆gt; toggleOff（），再按一次 - ＆gt; toggleOn（）

4 个答案: