时间戳

首页 > 解决方案 > 简单的函数在 Javascript 中不起作用

javascript - 简单的函数在 Javascript 中不起作用

问题描述

我一直在搞乱这个功能，当我像这样设置它时让它工作：

$(document).ready(function () {
            var num1 = document.getElementsByClassName("top")[0];

            num1.onmouseover = (function(){
                var changeIt = document.getElementsByClassName("topb")[0];
                if (changeIt.style.visibility === "hidden") {
                    changeIt.style.visibility = "visible";
                }else {
                changeIt.style.visibility = "hidden";

我的问题是我目前正在尝试使其成为一个可重用的函数，用于多个变量。当我尝试这样设置时：

$(document).ready(function () {

            var num1 = document.getElementsByClassName("top")[0];
            var num1b = document.getElementsByClassName("topb")[0];

            function myFunc(x){
                if(x.style.visibility === "hidden") {
                    x.style.visibility = "visible";
                }else {
                    x.style.visibility = "hidden";
                }};

            num1.onmouseover= myFunc(num1b);

它行不通。我确定这是一些语法或范围问题？不太确定我一直在研究它并且可以确定它）。有没有人有建议？非常感谢你。PS 我的 CSS 和 HTML 很好，因为我已经让它们使用之前的功能设置。

标签： javascriptjquery

解决方案

问题是您将函数的结果分配给mouseover 事件，而不是函数本身。由于它不返回任何内容，因此它被分配undefined并因此无效。

由于您的函数在可以访问num1b变量的范围内，因此您不需要将其作为参数传递。

试试这个：

function myFunc(){
  if(num1b.style.visibility === "hidden") {
    num1b.style.visibility = "visible";
  }else {
    num1b.style.visibility = "hidden";
  }
};

num1.onmouseover = myFunc;//assign the FUNCTION not the result by not including parenthesis

或者，要使用 jQuery 来减少代码，你可以简单地这样做：

$(".top").mouseover(function () {
  $(".topb").toggle();
});

每次鼠标在元素上移动一个像素时，mouseover 都会触发它，因此这可能会导致快速闪烁，您可能希望使用mouseenter和mouseleave更好地控制此行为。

推荐阅读