Question

有人可以向我解释我在这段代码中做错了什么吗？

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

在加载时我希望div隐藏但是当我点击按钮时我想要显示div？

布尔函数是否以正确的方式设置？

Answer 1

下面的一块试图在OP重新安排一块。 onload似乎没有明确定义，没有解决，但可以附加到event，即window.onload = onload。 jquery .ready() event中包含的块。从js移除了onclick html标记，包含在script元素中，或者从jquery .on("click")事件中的文件加载。添加了严格比较运算符===（已添加=）到if / else if语句。已将input type更改为按钮。已添加if至else部分内容（请参阅Felix Kling在评论中发布的链接）。

尝试

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

Answer 2

我假设您已加载JQuery库。尝试

if (state) {
        $("#content-container").show();
        $("#account2").show();
        $("#account").hide();

}
else{

     $("#content-container").hide();
        $("#account2").hide();
        $("#account").show();
}

解决您的问题。

Answer 3

将您的HTML更改为

<input type="submit" value="Boolean" id="toggle"/>

将你的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);
})

Answer 4

那么有一些事情我不确定你是否意识到这一点我觉得我有责任确保他们被提及。它们是你帖子中的一些语法错误，它们阻止了它的工作，而不是解决它们我认为有必要更新你正在使用的JQuery以及选择器选择的视图。

首先，我会在所有div中添加一个类结构，以便一次性定位它们，这样您就可以节省一些代码行。在生产中，为所有访问者下载更少的代码总是更好，因为即使一小段代码在网页上有足够的点击后也会失控。必须服务它才能杀死速度，因此必须处理三个单独的jquery选择而不是一个。

我会将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>

这样您只需使用$(".boxes");定位所有div ...我不建议进入使用$("div");的习惯

接下来，我会将JQuery更改为更加JQuery友好的代码。使用纯Javascript中的onload事件在正确的时间内处理JQuery驱动的函数来加载DOM对象并不总是有用的。因此，您应该使用$( document ).ready( handler )来正确处理此加载事件，以防它在未来发生问题。这个ready事件的更常见的简写是一个简单的$(function() { });包装器。

其余的代码可以重新安排到这个....

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

最后，版本。 JQuery的新版本已经发布了一段时间并且似乎没有发布，所以使用它们的最新版本是一个安全的选择，因为它的语法有数千页的帮助，并且它非常稳定。我会推荐2.0或更高版本的JQuery中的任何东西。

Javascript / Jquery布尔帮助：隐藏/显示Div

4 个答案: