按钮onclick不会更改style.div的显示

Question

我有两个div S，叫loginpending和loggedin ，而我试图来配置，这样一旦一个按钮（ button ）被点击， div的意志“忽悠”一个是上一个被关闭之间。

例如，在当前的状态（与loginpending的显示为block和loggedin的显示为none ），一旦按钮被点击， loginpending的显示将变得none和loggedin的显示将成为block通过函数loginUpdate ，然后根据每个div的状态通过launch调用。

但是，它不起作用-单击按钮后，按钮的状态根本不会改变。

救命！

HTML代码：

<div id="loginpending" style="display:block;">
  <a href="login.html">Signup</a>/<a href="login.html">Login</a> here!
</div>
<div id="loggedin" style="display:none;">
  Hello!
</div>
<button id="button" onclick="launch()">Hello!</button>

Javascript代码（使用Jquery）：

var logincheck = 0;

function loginUpdate() {
  "use strict";
  $("#loginpending").toggle();
  $("#loggedin").toggle();
}

function launch() {
  "use strict";
  var loginpending = document.getElementById("loginpending").style.display;
  var loggedin = document.getElementById("loggedin").style.display;
  window.alert(loginpending);
  window.alert(loggedin);
  if (loginpending === "none") {
    logincheck = 0;
    loginUpdate();
  } else if (loggedin === "none") {
    logincheck = 1;
    loginUpdate();
  } else {
    logincheck = 0;
    $("#loggedin").toggle();
  }
}

Answer 1

现在，您的button正在submitting ， from refreshes页面以其原始状态reloads 。

您需要将按钮的type设置为type="button"

<button id="button" type="button" onclick="launch()">Hello!</button>

Answer 2

 $(document).ready(function() { $('button').on('click', function(){ $('div').toggleClass('hidden'); }) });

 .hidden { display: none; }

 <!DOCTYPE html> <html> <head> </head> <body> <div id="loginpending" class=""> <a href="login.html">Signup</a>/<a href="login.html">Login</a> here! </div> <div id="loggedin" class="hidden"> Hello! </div> <button id="button" onclick="">Hello!</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script type="text/javascript" src="sample.js"></script> </body> </html>

jQuery代码

Answer 3

我尝试了尽可能多地使用您的原始代码。

 var logincheck = 0; $("#button").click(function() { launch(); }); function loginUpdate() { "use strict"; $("#loginpending").toggle(); $("#loggedin").toggle(); } function launch() { "use strict"; var loginpending = $("#loginpending").is(":hidden"); var loggedin = $("#loggedin").is(":hidden"); if(loginpending) logincheck = 0; else if (loggedin) logincheck = 1 else logincheck = 0; loginUpdate(); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="loginpending" style="display:block;"> <a href="login.html">Signup</a>/<a href="login.html">Login</a> here! </div> <div id="loggedin" style="display:none;"> Hello! </div> <button id="button" type="button">Hello!</button>

Answer 4

要尝试这个

 $(function() { var logincheck = 0; function loginUpdate() { "use strict"; $("#loginpending").toggle(); $("#loggedin").toggle(); } $('#button').on('click', function(){ "use strict"; if(logincheck == 0) { logincheck = 1; }else{ logincheck = 0; } loginUpdate(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="loginpending" style="display:block;"> <a href="login.html">Signup</a>/<a href="login.html">Login</a> here! </div> <div id="loggedin" style="display:none;"> Hello! </div> <button id="button">Hello!</button>

按钮onclick不会更改style.div的显示

问题描述

4 个解决方案

解决方案1
0 2016-06-16 09:11:06

解决方案2
0 2016-06-16 09:11:13

解决方案3
0 2016-06-16 09:17:09

解决方案4
0 2016-06-16 09:25:35

按钮onclick不会更改style.div的显示

问题描述

4 个解决方案

解决方案1 0 2016-06-16 09:11:06

解决方案2 0 2016-06-16 09:11:13

解决方案3 0 2016-06-16 09:17:09

解决方案4 0 2016-06-16 09:25:35

解决方案1
0 2016-06-16 09:11:06

解决方案2
0 2016-06-16 09:11:13

解决方案3
0 2016-06-16 09:17:09

解决方案4
0 2016-06-16 09:25:35