Javascript - 单击按钮时，第二次单击后 CSS 属性切换

Question

我正在使用 Javascript 编写一个简单的播放和暂停按钮代码。该脚本正在切换 CSS 属性；然而，在延迟之后。目前，切换发生在第二次点击时。不确定是什么问题。

   $(document).click(function () {
      $("#startClock").click(function () {
          $("#startClock").css("display", "none");
          $("#stopClock").css("display", "block");
      });
      $("#stopClock").click(function () {
          $("#stopClock").css("display", "none");
          $("#startClock").css("display", "block");
      });
});

#stopClock {
  display: none; 
}

#startClock {
  display: block;   
}

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id=startClock >Start</button>
<button id=stopClock >Pause</button> <br/>

Answer 1

代替 $(document).click 去 $(document).ready

$(document).ready(function () {
	    $("#startClock").click(function () {
	        $("#startClock").css("display", "none");
	        $("#stopClock").css("display", "block");
	    });
	    $("#stopClock").click(function () {
	        $("#stopClock").css("display", "none");
	        $("#startClock").css("display", "block");
	    });
	});

#stopClock {
  display: none; 
}

#startClock {
  display: block;   
}

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id=startClock >Start</button>
<button id=stopClock >Pause</button> <br/>

它的发生是因为在第一次点击时，document 正在监听； click 事件处理程序已附加到您的按钮。因此 CSS 动画需要 2 次点击。