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：无法读取属性＆＃39; toLowerCase＆＃39;未定义的的jquery-1.12.4.min.js：4

Answer 1

问题是＆＃34;这个＆＃34;在您的情况下是对窗口的引用，而不是您期望的文本框。 $（this）只能在绑定事件处理程序内部工作。尝试使用其他方法获取对$("#password").val()文本框的访问权限，或使用$("#password").focus(function(){})作为您的逻辑。

Answer 2

在passwordEvent和confirmPasswordEvent＆＃34;这个＆＃34;是导致事件的HtmlInputElement，通过jQuery事件处理程序传入。

我不相信这个范围会传递给密码，而不是＃34;和＃34;这个＆＃34;范围可能是窗口。使用浏览器调试工具通过调试点点击它。

您也可以使用＆＃34; passwordIsEnough.call（this）＆＃34;调用方法＆＃34; this＆＃34;将与调用方法的范围相同。

由于某种原因，jQuery中的错误，我无法弄清楚原因

有人可以看看吗？我相信jquery源代码有问题，但我不能提供更具体的解释。

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

2 个答案: