JavaScript 切换两个按钮

在前端开发中，我们经常需要切换两个按钮的状态。比如，我们可以在一个按钮被点击后，将其变成灰色且不可点击，同时将另一个按钮变为绿色且可点击。

为了实现这个交互效果，我们可以使用 JavaScript 编写代码，通过修改按钮的 CSS 样式和事件监听来达到目的。

代码实现

下面是一个简单的示例代码，演示如何切换两个按钮的状态。

// 获取按钮元素
const button1 = document.querySelector('.button1')
const button2 = document.querySelector('.button2')

// 监听按钮点击事件
button1.addEventListener('click', () => {
  // 禁用按钮 1
  button1.disabled = true
  button1.classList.add('disabled')

  // 启用按钮 2
  button2.disabled = false
  button2.classList.remove('disabled')
})

button2.addEventListener('click', () => {
  // 禁用按钮 2
  button2.disabled = true
  button2.classList.add('disabled')

  // 启用按钮 1
  button1.disabled = false
  button1.classList.remove('disabled')
})

在上面的代码中，我们首先获取了两个按钮的 DOM 元素，并为它们分别绑定了点击事件监听器。当其中一个按钮被点击时，我们将它禁用并添加一个 disabled 类名，同时将另一个按钮启用并移除 disabled 类名，以达到切换状态的效果。

CSS 样式

为了给禁用状态的按钮添加样式，我们可以使用 CSS 来定义 .disabled 类。

button.disabled {
  color: #999;
  background-color: #eee;
  border-color: #ccc;
  cursor: not-allowed;
}

在上面的代码中，我们定义了一些颜色和边框样式，以及一个 not-allowed 的光标。这样，在禁用按钮时，它们的外观就会更改以表明它们处于不可点击状态。

总结

在本文中，我们演示了如何使用 JavaScript 切换两个按钮的状态。我们使用了 querySelector 方法获取按钮元素，并使用 addEventListener 绑定了点击事件监听器。通过添加和移除 disabled 类名，我们改变了按钮的外观和可点击状态，从而实现了切换效果。同时，我们使用了 CSS 样式来定义禁用状态下的按钮样式。