最初我希望 ON 按钮显示块，关闭显示不显示，如果我单击 ON 按钮，OFF 出现 & On 消失，反之亦然

Question

我正在尝试使用显示属性来实现切换效果，一次只能显示一个按钮，而另一个按钮是隐藏的，反之亦然。目前，如果单击任何按钮，我都可以隐藏关闭按钮，那么我该怎么做才能一次只显示一个按钮

function myFunction() {
  var x = document.getElementById("on");
  var y = document.getElementById("off");
  
  y.style.display ="none";

  if (x.style.display === "none") {
    x.style.display = "block";
  } 
  else {
    y.style.display = "none";
    x.style.display = "block";
  }
}

<button onclick="myFunction()" id="on">ON</button>
<button onclick="myFunction()" id="off">OFF</button>

Answer 1

您的逻辑问题是您需要在您调用的函数中切换两个元素的display 状态：

var on = document.getElementById("on");
var off = document.getElementById("off");
  
function myFunction() {  
  if (on.style.display === "none") {  
    off.style.display = "none";
    on.style.display = "block";
  } else {
    off.style.display = "block";
    on.style.display = "none";
  }
}

<button onclick="myFunction()" id="on">ON</button>
<button onclick="myFunction()" id="off" style="display: none;">OFF</button>

另一种方法是使用 CSS 类来隐藏所需的元素。这避免了对if 条件的需要。然后，您可以使用classList.toggle() 在连续单击时在每个元素上打开/关闭类。像这样的：

let toggles = document.querySelectorAll('.toggle');

toggles.forEach(toggle => {
  toggle.addEventListener('click', e => {
    toggles.forEach(el => el.classList.toggle('hide'));
  });
});

.hide { display: none; }

<button class="toggle" id="on">ON</button>
<button class="toggle hide" id="off">OFF</button>

或者更简单地使用 jQuery：

let $toggles = $('.toggle').on('click', () => $toggles.toggleClass('hide'));

.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button class="toggle" id="on">ON</button>
<button class="toggle hide" id="off">OFF</button>

Answer 2

在此解决方案中，当单击开和关按钮时，会调用toggle() 方法并更改display 属性。为了最初隐藏按钮，我将<button> 的display 属性设置为off id 值为none；此功能也可以通过使用页面加载时触发的onload 事件来提供。

const on = document.getElementById('on');
const off = document.getElementById('off');

function toggle(){
  if(on.style.display === 'none'){
    on.style.display = 'block';
    off.style.display = 'none';
  }
  else{
    on.style.display = 'none';
    off.style.display = 'block';
  }
}

on.addEventListener('click', function(){
  toggle();
});

off.addEventListener('click', function(){
  toggle();
});

#on {
  display: block;
}

#off {
  display: none;
}

<button id="on">ON</button>
<button id="off">OFF</button>