onmouseover 不起作用，函数未定义

Question

我有一个图标，需要将它所在的 password_field 放入文本字​​段，反之亦然。

<i class="password_icon fa fa-unlock" aria-hidden="true" onmouseover="mouseOverPassword()" onmouseout="mouseOutPassword()"></i>

但是当我将鼠标悬停在图标上时，它说：

Uncaught ReferenceError: mouseOutPassword is not defined
at HTMLElement.onmouseout ((index):1)

即使它们在我包含的 .js 文件中：

function mouseOverPassword() {
    var obj = $("#passworldField");
    obj.type = "text";
}
function mouseOutPassword() {
    var obj = $("#passworldField");
    obj.type = "password";
}'

这些函数在 $(document).ready 函数中。 我真的不知道为什么它不起作用。 是的，.js 包含在页面中。

Answer 1

当函数被限定在另一个函数中时，在你的情况下，在$(document).ready它们在 html 中是不可见的。 您需要通过 Javascript 绑定它们。 通过id或name或其他方式获取您的元素并通过该方法附加。

<i id="iEl" class="password_icon fa fa-unlock" aria-hidden="true"></i>

...

$('#iEl').on('mouseover', mouseOverPassword);
$('#iEl').on('mouseout', mouseOutPassword);

Answer 2

您最好的方法是将您的函数移出$(document).ready并在您的$(document).ready内定义mouseover事件，而不是直接在您的 HTML 中执行它。

$( "#element" ).mouseover(function() {
  mouseOverPassword() 
}

与mouseleave相同，请在此处查看 jQuery 文档： https : //api.jquery.com/mouseover/

另一件事是完全删除您$(document).ready并将您的<script src="file.js"></script>放在页面底部，就在</body>结束标记之前。

Answer 3

在某些情况下，您无法获得每个元素的ID标签，

总体而言，它对我有用，更简单，只需将您的功能移出document.ready {}范围即可。