What do I wrong and I have this TypeError: Cannot set property 'visibility' of undefined?

Question

我已经在我的代码中写了两次 HTML 代码：

<a class="button-to-hover">LEARN MORE</a>
<div class="buttons"></div>

我想做的是让“.buttons”

在有人悬停在“.button-to-hover” 元素上时出现。所以，我还添加了这个 CSS 代码：

.buttons {
   visibility: hidden;
}

最后，我添加了这段 Javascipt 代码：

function appearUnderline(underline) {
    this.style.visibility = "visible"; // make the div visible
}

function disappearUnderline(underline) {
    this.style.visibility = "hidden"; // make the div invisible (for when the user stops hovering over the element)
}

function buttonHover(button) {
    this.onmouseover = appearUnderline(this.nextSibling); // when the user hovers, appear the sibling of the element
    this.onmouseout = disappearUnderline(this.nextSibling); // when the user stops hovering, disappear the sibling of the element
}

let buttonNumberOne = document.getElementsByClassName('button-to-hover')[0]; // take the first element you can hover in
let buttonNumberTwo = document.getElementsByClassName('button-to-hover')[1]; // take the second element you can hover in

let button1 = buttonHover(buttonNumberOne); // apply the first button as an argument in buttonHover() function
let button2 = buttonHover(buttonNumberTwo); // apply the second button as an argument in buttonHover() function

如您所见，我是 Javascript 的初学者。此代码不起作用。我做错了什么？

Answer 1

this accessor 在这里是错误的。

这是解决 this 问题后的解决方案：

function appearUnderline(underline) {
    underline.style.visibility = "visible"; // make the div visible
}

function disappearUnderline(underline) {
    underline.style.visibility = "hidden"; // make the div invisible (for when the user stops hovering over the element)
}

function buttonHover(button) {
    button.onmouseover = appearUnderline(this.nextSibling); // when the user hovers, appear the sibling of the element
    button.onmouseout = disappearUnderline(this.nextSibling); // when the user stops hovering, disappear the sibling of the element
}

let buttonNumberOne = document.getElementsByClassName('button-to-hover')[0]; // take the first element you can hover in
let buttonNumberTwo = document.getElementsByClassName('button-to-hover')[1]; // take the second element you can hover in

let button1 = buttonHover(buttonNumberOne); // apply the first button as an argument in buttonHover() function
let button2 = buttonHover(buttonNumberTwo); // apply the second button as an argument in buttonHover() function

您还需要添加检查以确保传递的 nextSibling 不为空。

针对您的问题，这是一个更简单的解决方案：

var buttonToHover = document.getElementsByClassName("button-to-hover")[0];
var buttons = document.getElementsByClassName("buttons")[0];
buttonToHover.onmouseover = () => {
buttons.style.visibility = "visible";
}
buttonToHover.onmouseout = () => {
buttons.style.visibility = "hidden";
}

.buttons {
  visibility: hidden;
  }

<a class="button-to-hover">LEARN MORE</a>
<div class="buttons">test</div>

如果你想用this解决这个问题，有一个 bind的概念可以帮助你更多。

Answer 2

采用 CyberDev 的答案并使其更加灵活并使用现代 javascript（将 querySelectorAll 替换为 getElementsByClassName 并循环使用它，如果你想支持旧版本的浏览器） :

//Select all your buttons to hover and loop over the list
//With querySelector or querySelectorAll you select elements with css selectors (start with . for a class and # for an id etc)
document.querySelectorAll(".button-to-hover").forEach((btn)=> {
  //Add the action to perform when the mouse is over the button
  btn.addEventListener('mouseover', ()=> {
    btn.nextElementSibling.style.visibility = "visible";
  });
  //Add the action to perform when the mouse is not over the button anymore
  btn.addEventListener('mouseout', ()=> {
    btn.nextElementSibling.style.visibility = "hidden";
  });
});

.buttons {
  visibility: hidden;
  }

<a class="button-to-hover">LEARN MORE</a>
<div class="buttons">content 1</div>

<div><!--Your page content--></div>

<a class="button-to-hover">LEARN MORE</a>
<div class="buttons">content 2</div>

What do I wrong and I have this TypeError: Cannot set property 'visibility' of undefined?

What do I wrong and I have this TypeError: Cannot set property 'visibility' of undefined?

javascript

arrays

error-handling

function