Javascript / Jquery布爾幫助：隱藏/顯示Divs

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包裝塊。 從html刪除了js onclick標記，包括在script元素中，或者從jquery .on("click") event的文件中加載。 在if / else if語句中添加了嚴格的比較運算符=== （添加了= ）。 將input type更改為按鈕。 在構成的else部分添加了if （請參閱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 $(".boxes"); ...我不建議您進入使用$("div");的習慣$("div");

接下來，我將JQuery更改為對JQuery更友好的代碼。 使用純Javascript的onload事件在加載DOM對象的正確時間內處理JQuery驅動的函數並不總是有用。 因此，您應該使用$( document ).ready( handler )正確處理此加載事件，以防萬一它給您帶來麻煩。 這個就緒事件最常見的縮寫是簡單的$(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已有一段時間沒有發布，而且似乎尚未發布，因此可以安全地使用最新版本的JQuery，因為它有數千頁的語法幫助並且非常穩定。 我會推薦2.0或更高版本的JQuery中的任何內容。

Javascript / Jquery布爾幫助：隱藏/顯示Divs

問題描述

4 個解決方案

解決方案1
1 2014-10-09 00:15:05

解決方案2
0 2014-10-09 00:17:03

解決方案3
0 2014-10-09 00:23:49

解決方案4
0 2014-10-09 00:45:03

Javascript / Jquery布爾幫助：隱藏/顯示Divs

問題描述

4 個解決方案

解決方案1 1 2014-10-09 00:15:05

解決方案2 0 2014-10-09 00:17:03

解決方案3 0 2014-10-09 00:23:49

解決方案4 0 2014-10-09 00:45:03

解決方案1
1 2014-10-09 00:15:05

解決方案2
0 2014-10-09 00:17:03

解決方案3
0 2014-10-09 00:23:49

解決方案4
0 2014-10-09 00:45:03