Question

我有一个图标，需要将密码字段放在文本字段中，反之亦然。

<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并在mouseover内定义$(document).ready事件，而不是直接在HTML中进行。

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

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

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

onmouseover不起作用，函数未定义

2 个答案: