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

Javascript - When a button is clicked the CSS property toggle after second click

本文关键字：单击 第二次 CSS 按钮 Javascript 属性      更新时间：2023-09-26

我正在使用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/>

与其选择$(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 动画。

	$(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(function() {

自 

$(document).ready(function() {

我看不到上下文，但看起来您有两个嵌套的单击侦听器。

问题是您已将代码包装在$(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/>

试试这个，

使用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");
    });
});
相关文章：