JavaScript中的Ghost元素

Question

因此，我一直在設計使用cookie的“記住我”按鈕，並為此做了兩個功能：

function checkInfo() {
var blah = $("#remem");
alert(blah.id);
var login = $("#nameInput").val();
var pw = $("#pwInput").val();
if (blah.checked) setCookie(login, pw, 5);
if (localStorage[login] == pw) {
$("#loginscreen").css("display", "none");
$("#ques0").css("display", "block");
} else alert("Your info doesn't match, sorry :(");
}

function setCookie(name, value, daysToLive) {
        alert(name);
        var text = name + "=" + encodeURIComponent(value);
        text = text + ";max-age=" + (daysToLive*60*60*24);
        document.cookie = text;
        alert(text);
    }

由於某種原因，以這種形式運行時無法找到#remem元素：

<form id = "loginscreen">
    <p class = "input" style = "display: block; margin: 0 0 30px 0">Now, log in :)</p>
        <p class = "input">Login:</p><input id = "nameInput" type = "text" name = "fName" />
    <p class = "input">Password:</p><input id = "pwInput" type = "text" name = "password" />
   <input type = "button" value = "Submit" onclick = "checkInfo();" />
   <p class = "input">Remember me</p><input id = "remem" type = "checkbox" name = "remember" />
</form>

很奇怪，因為它在其上方找到#nameinput和#pwInput。 我也像一個星期前一樣剛剛開始使用javascript。 救命！

Answer 1

blah是一個jQuery對象，不是普通的DOM元素，因此，它沒有id或checked屬性。 使用prop來訪問它們，例如blah.prop('id')和blah.prop('checked') 。 或者，您可以使用blah.get(0)從jQuery對象獲取基礎DOM元素。

Answer 2

您沒有設置localstorage ，而是要訪問它，因此會產生error 。

您可以像這樣創建兩個函數，例如createCookie和readCookie`，

function readCookie(name) {
    if(typeof(Storage)!=="undefined"){
        // window.localStorage is available!
        return localStorage.getItem(name);
    } else {
        createCookie(name,"",-1);
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
}

//Add cookies//
function createCookie(name,value,days) {
    if(typeof(Storage)!=="undefined"){
        // window.localStorage is available!
        localStorage.setItem(name, value);
    } else {
        // no native support for HTML5 storage :(
        // maybe try dojox.storage or a third-party solution

        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires=0";//+date.toGMTString();
        }
        else var expires = "";
            document.cookie = name+"="+value+expires+"; path=/";
    }
}

// Use this function in your function like,

function checkInfo() {
    var blah = $("#remem");
    alert(blah.id);
    var login = $("#nameInput").val();
    var pw = $("#pwInput").val();
    if (blah.checked) createCookie(login, pw, 5);
    if (readCookie(login) == pw) {
        $("#loginscreen").css("display", "none");
        $("#ques0").css("display", "block");
    } else alert("Your info doesn't match, sorry :(");
}