按钮onclick不会更改div的style.display

时间:2016-06-16 09:03:09

标签: javascript jquery html getelementbyid

我有两个div,名为loginpendingloggedin,我正在尝试对其进行配置,以便在点击按钮(button)后,{{{ 1}} s将在一个开启和一个关闭之间“闪烁”。

例如,在此当前状态下(div显示为loginpendingblock显示为loggedin),点击该按钮后,{ {1}}的显示将变为noneloginpending的显示将通过函数none变为loggedin,然后根据block调用关于每个loginUpdate的状态。

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

帮助!

HTML code:

launch

Javascript代码(使用Jquery):

div

4 个答案:

答案 0 :(得分:0)

现在,button submitting from refreshes页面reloads处于原始状态。

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

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

答案 1 :(得分:0)

Public Sub Sample()
Dim ArySplit() As String
ArySplit = FnSplit("This|is|my||string", "|")
End Sub

Private Function FnSplit(ByVal StrContent As String, ByVal StrDelimiter As String) As String()
Dim AryTemp() As String
ReDim AryTemp(0)

'Work until we have nothing left to work with
Do Until StrContent = ""

    'Only increase the array size if needed
    If AryTemp(UBound(AryTemp, 1)) <> "" Then ReDim Preserve AryTemp(UBound(AryTemp, 1) + 1)

    'if the delimiter is no longer there then output the remaining content
    'and clear out the todo string
    If InStr(1, StrContent, StrDelimiter) = 0 Then
        AryTemp(UBound(AryTemp, 1)) = StrContent
        StrContent = ""
    Else
        'If there is a delimiter then then add it to the array and take it and the delimiter
        'off of the to do string
        AryTemp(UBound(AryTemp, 1)) = Left(StrContent, InStr(1, StrContent, StrDelimiter) - 1)
        StrContent = Right(StrContent, Len(StrContent) - ((InStr(1, StrContent, StrDelimiter) - 1) + Len(StrDelimiter)))
    End If
Loop

'Return our array
FnSplit = AryTemp

End Function
$(document).ready(function() {
    $('button').on('click', function(){
    	$('div').toggleClass('hidden');
    })
});
    
    .hidden {
        display: none;
    }

使用jQuery编写代码

答案 2 :(得分:0)

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

&#13;
&#13;
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();
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

要试试这个

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