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

之所以发生，是因为首先 click 被 document 收听； click 事件处理程序已附加到您的 button。因此 CSS 动画需要 2 次点击。

Answer 2

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

因为一开始你第一次点击它是因为点击事件里面的点击。您单击了文档，然后单击了按钮。

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