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

Question

我正在使用Javascript编写一个简单的Play和Pause按钮代码。该脚本正在切换CSS属性;然而，经过一段延迟。目前，切换发生在第二次点击。不确定是什么问题。

＆＃13;

＆＃13;

   $(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");
      });
});

＆＃13;

#stopClock {
  display: none; 
}

#startClock {
  display: block;   
}

＆＃13;

<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/>

＆＃13;

＆＃13;

＆＃13;

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/>

之所以发生这种情况，是因为click正在听document; click事件处理程序已附加到您的button。因此，需要2次点击CSS动画。

Answer 2

＆＃13;

＆＃13;

	$(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");
			});
		});

＆＃13;

#stopClock {
  display: none; 
}

#startClock {
  display: block;   
}

＆＃13;

<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/>

＆＃13;

＆＃13;

＆＃13;

因为首先你第一次点击它两次因为点击事件内部的点击。您单击了文档并单击了按钮。

Answer 3

如果你改变了怎么办

$(document).click(function() {

到

$(document).ready(function() {

我无法看到上下文，但看起来你有两个嵌套的点击监听器。

Answer 4

问题是你在$(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/>

您应该避免使用样式属性。相反，你应该使用class。如果您切换到class方法，则可以使用toggleClass或addClass/removeClass函数来更新可见性。

示例

$(document).ready(function() {
  $("#startClock, #stopClock").click(function() {
    $("#startClock").toggleClass("hide");
    $("#stopClock").toggleClass("hide");
  });
});

.hide{
  display:none
}

<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" class="hide">Pause</button>
<br/>

Answer 5

试试这个，

使用preventDefault即可。

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