jQuery中的錯誤由於某種原因，我不知道為什么

Question

有人可以看看嗎？我相信jquery源代碼出了點問題，但是我無法提供比這更具體的解釋。

https://codepen.io/SebastianSapien/pen/wWJXMB

app.js：

//Hide hints
$("form span").css("display", "none");

//create som variables to make the code easier to follow
var $password = $("#password");
var $confirmPassword = $("#confirmPassword");

//when focusing (clicking) on the password text input, show the
//hints until the length of the input reaches 8.

//specifies whether the password specified is long enough
function passwordIEnough() {
    return $(this).val().length > 8;
}

//specifies if the password and confirm password boxes are equal
function passwordsAreEqual() {
    return $password.val() === $confirmPassword.val();
}


function passwordEvent() {
        if ( passwordIsEnough() ) {
            $(this).next().css("display", "none");
        } else {
            $(this).next().css("display", "inline-block");
        }
}

function confirmPasswordEvent() {
    if ( passwordsAreEqual() ) {
        $(this).next().css("display", "none");
    } else {
        $(this).next().css("display", "inline-block");
    }
}

的HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dropdown</title>
        <link rel="stylesheet" href="css/style.css" charset="utf-8">
    </head>
    <body>

    <form action="#" method="post">
    <h2>Professional Form</h2>
        <label for="username">Username</label>
            <input type="text" id="uname" name="username">

        <label for="password">Password</label>
            <input type="password" id="password" name="password">
            <!-- <div class="arrow-left"></div> -->
            <span>Atleast 8 characters</span>

        <label for="confirmPassword">Confirm Password</label>
            <input type="password" id="confirmPassword" name="confirmPassword">
            <!-- <div class="arrow-left"></div> -->
            <span>Please confirm your password</span>

            <input type="submit" value="Submit" id="submit">
    </form>


    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>



$password.focus(passwordEvent).keyup(passwordEvent).focus(confirmPasswordEvent).keyup(confirmPasswordEvent);

$confirmPassword.focus(confirmPasswordEvent).keyup(confirmPasswordEvent);

控制台說什么：

未捕獲的TypeError：無法讀取未定義的jquery-1.12.4.min.js：4的屬性'toLowerCase'

Answer 1

問題在於您的情況下的“ this”是對窗口的引用，而不是您期望的對文本框的引用。 $（this）僅在綁定的事件處理程序內工作。 嘗試使用其他訪問文本框的方法，例如$("#password").val() ，或將$("#password").focus(function(){})用於您的邏輯。

Answer 2

在passwordEvent和ConfirmPasswordEvent中，“ this”是導致事件的HtmlInputElement，它通過jQuery事件處理程序傳遞。

我認為此范圍不會傳遞給“ passwordIsEnough”，並且“ this”范圍可能是Windows。 使用您的瀏覽器調試工具在調試點點擊它。

您也可以使用“ passwordIsEnough.call（this）”來調用它，以調用“ this”與調用方法具有相同作用域的方法。

jQuery中的錯誤由於某種原因，我不知道為什么

問題描述

有人可以看看嗎？我相信jquery源代碼出了點問題，但是我無法提供比這更具體的解釋。

https://codepen.io/SebastianSapien/pen/wWJXMB

2 個解決方案

解決方案1
2 已采納 2016-06-29 00:20:53

解決方案2
0 2016-06-29 00:24:06

jQuery中的錯誤由於某種原因，我不知道為什么

問題描述

有人可以看看嗎？ 我相信jquery源代碼出了點問題，但是我無法提供比這更具體的解釋。

https://codepen.io/SebastianSapien/pen/wWJXMB

2 個解決方案

解決方案1 2 已采納 2016-06-29 00:20:53

解決方案2 0 2016-06-29 00:24:06

有人可以看看嗎？我相信jquery源代碼出了點問題，但是我無法提供比這更具體的解釋。

解決方案1
2 已采納 2016-06-29 00:20:53

解決方案2
0 2016-06-29 00:24:06