Javascript/jquery布爾幫助：隱藏/顯示Div

有人可以向我解釋我在這段代碼中做錯了什麼？Javascript/jquery布爾幫助：隱藏/顯示Div

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顯示按鈕？

是否以正確的方式設置了布爾函數？

來源

2014-10-09 LearnerBeware

*「布爾函數的設置是否正確？」否：未捕獲的SyntaxError：意外的標記{'。瞭解有關'if ... else'語句的更多信息：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else – 2014-10-09 00:07:44

'else if'，not only' else'或者只是刪除else部分的條件部分，但是你的小提琴也是錯誤的，因爲你的js代碼已經在onload事件中加載了 – 2014-10-09 00:07:52

@Patrick Evans'說了什麼，你會把所有的JavaScript放在你的'onload = function（）{/ *在這裏* /}'。 jQuery'onload'等價物看起來像'$（function（）{/ * in here * /}）'，它是最簡單的形式。 – PHPglue 2014-10-09 00:37:52

下面的片段試圖重新安排在OP部分。 onload沒有明確定義，沒有解決，但可以附加到event，即，例如，window.onload = onload。 jquery中的包裹塊.ready()event。刪除jsonclick標記從html，包括在script元素，或從jquery .on("click")事件加載文件。新增嚴格比較運算符===（增加了=）至if/else if聲明。將inputtype更改爲按鈕。添加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/

來源

2014-10-09 00:15:05 guest271314

當然，應該在AJAX響應後執行'isLoggedIn'。 – PHPglue 2014-10-09 00:23:15

爲什麼OP應該這樣做？他們的代碼有什麼問題？你的解決方案如何解決它？ – 2014-10-09 00:28:25

工程，但然後沒有其他的JavaScript功能工作 – LearnerBeware 2014-10-09 00:57:57

我假設你擁有jQuery庫加載。嘗試

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

} 
else{ 

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

解決您的問題。

來源

2014-10-09 00:17:03 rjae

爲什麼OP應該這樣做？ – 2014-10-09 00:29:32

改變了你的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); 
})

來源

2014-10-09 00:23:49 Blue

在提交表單之前不應執行'isLoggedIn'。你如何檢查這樣的數據庫？使用AJAX。在你的點擊事件處理函數中，如果你在AJAX中使用'submit'按鈕，'return false;'。就個人而言，除非我要使用'formElement.serialize（）'或'formElement.serializeArray（）'，否則我甚至不會使用表單。 – PHPglue 2014-10-09 00:26:31

爲什麼要更改HTML和JS？有什麼問題？ – 2014-10-09 00:29:02

這只是代碼的一小部分，它已被簡化以便於回答。一旦表單被提交併且驗證返回正確，就會調用這個函數 – LearnerBeware 2014-10-09 01:03:39

那麼有幾件事情我不知道，如果你是知道的，所以我覺得有我的結束部分責任確保他們被提及。它們是你的文章中的一些語法錯誤，它們阻止了它的工作，所以我不覺得有必要更新你對你正在使用的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事件在正確的時間處理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已經有一段時間沒有發佈，似乎也沒有出現，所以使用最新版本是一個安全的選擇，因爲它的語法有數千頁的幫助，而且非常穩定。我會推薦2.0或更高版本的JQuery中的任何東西。

來源

2014-10-09 00:45:03 GoreDefex

如果我將html更改爲類，那麼單個CSS樣式將適用於我不想要的所有div。有沒有辦法解決？有 – LearnerBeware 2014-10-09 01:07:17

。在你的CSS中什麼也沒有強迫你根據任何你想要的東西來選擇樣式。所以如果我選擇了一個你現在使用的測試類，比如'.boxes'，那麼就使用你自己的類。如果您想單獨選擇每個div，請使用留在div上的ID。這就是我離開他們的原因。 Theres太多原因通常想單獨選擇一個像div一樣的包裝類。 – GoreDefex 2014-10-09 01:24:56

Javascript/jquery布爾幫助：隱藏/顯示Div

回答

相關問題