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 {}范圍即可。