Javascript / Jquery布尔帮助：隐藏/显示Divs
[英]Javascript/Jquery Boolean help: Hiding/Showing Divs
问题描述
Can someone explain to me what i am doing wrong in this code? 
有人可以向我解释这段代码在做什么吗？
http://jsfiddle.net/14njfqef/ http://jsfiddle.net/14njfqef/
var isLoggedIn = function(state){
if(state == true) {
$("#content-container").show();
$("#account2").show();
$("#account").hide();
}
else(state == false){
$("#content-container").hide();
$("#account2").hide();
$("#account").show();
}
}
onload=function() {
isLoggedIn(false);
}
On load i want the divs to hide but then when i click the button i want the divs to show? 加载时，我希望div隐藏，但是当我单击按钮时，我希望div显示？
Is the boolean function set out in the correct way? 布尔函数设置正确吗？
4 个解决方案
解决方案1
1 2014-10-09 00:15:05
Piece below tries to re-arrange piece at OP. 以下作品试图在OP处重新安排作品。 onload not appear clearly defined , not addressed , though could be attached to an event , ieg, window.onload = onload . 尽管可以将onload看起来没有明确定义，也没有解决，但可以附加到event ，例如window.onload = onload 。 Wrapped blocks in jquery .ready() event . jQuery .ready() event包装块。 Removed js onclick markup from html , included at script element , or loaded from file at jquery .on("click") event . 从html删除了js onclick标记，包括在script元素中，或者从jquery .on("click") event的文件中加载。 Added strict comparison operator === (an added = ) to if / else if statements. 在if / else if语句中添加了严格的比较运算符=== （添加了= ）。 Changed input type to button. 将input type更改为按钮。 Added if to else portion of composition (see link posted at comments by Felix Kling). 在构成的else部分添加了if （请参阅Felix Kling在评论中发布的链接）。
Try 尝试
$(function() {
var isLoggedIn = function(state){
if(state === true) {
$("#content-container").show();
$("#account2").show();
$("#account").hide();
}
else if(state === false){
$("#content-container").hide();
$("#account2").hide();
$("#account").show();
}
};
isLoggedIn(false);
$("input[type=button]").click(function() {
isLoggedIn(true)
})
});
jsfiddle http://jsfiddle.net/guest271314/14njfqef/3/ jsfiddle http://jsfiddle.net/guest271314/14njfqef/3/
解决方案2
0 2014-10-09 00:17:03
I am assuming you have JQuery library loaded. 我假设您已经加载了JQuery库。 Try 尝试
if (state) {
$("#content-container").show();
$("#account2").show();
$("#account").hide();
}
else{
$("#content-container").hide();
$("#account2").hide();
$("#account").show();
}
to solve your problem. 解决您的问题。
解决方案3
0 2014-10-09 00:23:49
changed your html to 将您的html更改为
<input type="submit" value="Boolean" id="toggle"/>
rewrote your js as 将您的js重写为
// JQuery run at start effectivly
$(document).ready(function() {
function isLoggedIn(state) {
if(state == true) {
$("#content-container").show();
$("#account2").show();
$("#account").hide();
}
else {
$("#content-container").hide();
$("#account2").hide();
$("#account").show();
}
}
// JQuery attaching a click event using an anonymous function
// and hard coding your isLoggedIn to true, passing variables is a bit more complicated.
$('#toggle').click(function() {isLoggedIn(true)});
isLoggedIn(false);
})
解决方案4
0 2014-10-09 00:45:03
Well there's a few things I am not sure if you are aware of so I feel there's some responsibility on my end to make sure they are mentioned. 好吧，有些事情我不确定您是否知道，因此我认为确保自己被提及是我的责任。 They are a number of syntactical errors in your post that are stopping this from working so instead of addressing them I feel its necessary to update your view on what JQuery you are using as well as your selector choice. 它们是您帖子中的许多语法错误，这些错误阻止了此错误的发生，因此与其解决这些错误，我认为有必要更新您对所使用的JQuery以及选择器选择的看法。
First I would add a class structure to all of the div's to target them all at once so you can save on some lines of code. 首先，我将为所有div添加一个类结构，以一次将它们全部定位为目标，这样您就可以节省一些代码行。 In production it's always better to have less code for all of your visitors to download because even a little bit of code can get out of control after enough hits on a webpage. 在生产环境中，最好让所有访问者都下载更少的代码，因为在网页上被足够点击后，甚至一小部分代码也会失去控制。 Having to serve it kills speed and so does having to process three separate jquery selections as opposed to one. 必须提供服务会浪费速度，因此必须处理三个独立的jquery选择而不是一个。
I would change the HTML to... 我将HTML更改为...
<body>
<div id='content-container' class='boxes'>
Content Container
</div>
<div id='account' class='boxes'>
account
</div>
<div id='account2' class='boxes'>
account2
</div>
<input id="validateButton" type="submit" value="Boolean">
</body>
This way you can simply target all divs with $(".boxes"); 这样，您可以简单地使用$(".boxes");定位所有div $(".boxes"); ... I wouldn't recommend getting into the habbit of using $("div"); ...我不建议您进入使用$("div");的习惯$("div");
Next I would change the JQuery to being more JQuery friendly code. 接下来，我将JQuery更改为对JQuery更友好的代码。 Its not always useful to use an onload event from pure Javascript to handle JQuery driven functions in correct time to the loading of DOM objects. 使用纯Javascript的onload事件在加载DOM对象的正确时间内处理JQuery驱动的函数并不总是有用。 Therefore you should use $( document ).ready( handler ) to handle this load event properly just in case it causes you problems down the road. 因此，您应该使用$( document ).ready( handler )正确处理此加载事件，以防万一它给您带来麻烦。 The more common shorthand of this ready event is a simple $(function() { }); 这个就绪事件最常见的缩写是简单的$(function() { }); wrapper. 包装。
The rest of the code can be re-arranged to this.... 其余代码可以重新安排为此。
var isLoggedIn = false; //<--Instantiate to false, make global to window level scope
//Load event Corrected For JQuery
$(function() {
$(".boxes").hide(); //<--Hide on load
//Add A Proper Updated Click Event To Button
$("#validateButton").click(function() {
isLoggedIn = true; //<--Should include real functionality not hand coded to true
checkLoginAndRespond(); //<--Validate Login Status
});
});
function checkLoginAndRespond() {
//If Logged, Show
if(isLoggedIn) {
$(".boxes").show();
//Else Don't
} else { $(".boxes").hide(); }
} //end function
Lastly, the version. 最后是版本。 New versions of JQuery have not been released for some time and seem to not be in the making so its a safe bet to use their most recent versions as it has thousands of pages of help for its syntax and it's very stable. 新版本的JQuery已有一段时间没有发布，而且似乎尚未发布，因此可以安全地使用最新版本的JQuery，因为它有数千页的语法帮助并且非常稳定。 I would recommend anything in the 2.0 or higher series JQuery. 我会推荐2.0或更高版本的JQuery中的任何内容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.