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

时间:2016-07-15 11:48:02

标签: javascript jquery html css toggle

我正在使用Javascript编写一个简单的Play和Pause按钮代码。该脚本正在切换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/>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分: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/>

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

答案 1 :(得分: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;

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

答案 2 :(得分:0)

如果你改变了怎么办

$(document).click(function() {

$(document).ready(function() {

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

答案 3 :(得分:0)

问题是你在$(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方法,则可以使用toggleClassaddClass/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/>

答案 4 :(得分:0)

试试这个,

使用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");
    });
});