Question

我一直在使用此功能，当我这样设置它时，它就可以工作：

$(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很好，因为我已经将它们与以前的功能一起使用。

Answer 1

问题是您正在将函数的结果分配给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();
});

鼠标悬停将导致每次鼠标在元素上移动一个像素时触发该事件，因此这可能导致快速闪烁，您可能需要使用mouseenter和mouseleave来更好地控制这种行为。

简单功能无法在Javascript中使用

1 个答案: