如何在鼠标悬停时增加一个全局变量，但在鼠标悬停时让它恢复到正常值？

Question

您好我是 javascript 的新手，正在尝试创建以下功能。

我有 7 个按钮。其中一些从一开始就悬而未决。这取决于从数据库中获取的数值。因此，当数据库中的这个值为 4 时，将悬停 4 个按钮

但是，当悬停在“记住”或“不记得”按钮时，如下图所示。悬停的按钮数量应该会暂时改变。

当悬停“记住”时 - 按钮 5 也应该悬停。当“Remembered”未悬停时 - 只有 4 个按钮应该再次悬停。

当“DidNotRemember 悬停”时 - 只有按钮 1 应该悬停。当“DidNotRemember”未悬停时 - 只有 4 个按钮应该再次悬停。

下面是我的方法，我不太明白为什么它不起作用。

我的代码：

var actualLeitnerbox = 4; // Dummy value. Will normally be fetched from database

var leitnerbox = actualLeitnerbox;

function rememberedHovered(leitnerbox) {

  leitnerbox += 1;

  return leitnerbox

}

function rememberedNotHovered(leitnerbox, actualLeitnerbox) {

  leitnerbox = actualLeitnerbox;

  return leitnerbox

}

function didNotRememberHovered(leitnerbox) {

  leitnerbox = 1;

  return leitnerbox

}

function didNotRememberNotHovered(leitnerbox, actualLeitnerbox) {

  leitnerbox = actualLeitnerbox;

  return leitnerbox

}

var header = document.getElementById("myDIV");

var btns = header.getElementsByClassName("btn");

for (var i = 0; i < leitnerbox; i++) {

  btns[i].classList.add("active");

}

/* Style the buttons */

.btn {

  border: none;

  outline: none;

  padding: 10px 16px;

  background-color: #f1f1f1;

  cursor: pointer;

  font-size: 18px;

}

/* Style the active class, and buttons on mouse-over */

.active,

.btn:hover {

  background-color: #666;

  color: white;

}

<button onmouseover="rememberedHovered()" onmouseout="rememberedNotHovered()" class="btn "> Remembered </button>

<button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button>

<div id="myDIV">

  <button class="btn">1</button>

  <button class="btn">2</button>

  <button class="btn">3</button>

  <button class="btn">4</button>

  <button class="btn">5</button>

  <button class="btn">6</button>

  <button class="btn">7</button>

</div>

Answer 1

第一：您的函数function rememberedHovered(leitnerbox)和其他函数接受参数，但您不会在悬停事件上传递它们<button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button>。因为leitnerbox和actualLeitnerbox是全局变量——你真的不需要你的函数将它们作为参数。第二：您没有更改按钮状态的功能。这部分代码var header = document.getElementById("myDIV");var btns = header.getElementsByClassName("btn");for (var i = 0; i < leitnerbox; i++) {&nbsp; btns[i].classList.add("active");}只会在第一次加载时起作用，但当您将鼠标悬停在按钮上时不会改变任何东西。所以你也需要它作为一个函数并将它放在你的 onHover 函数中。你还需要稍微改变一下这部分。由于按钮的数量active发生变化，您将不得不以某种方式停用它们。我希望这是您想要的功能：var actualLeitnerbox = 4;var leitnerbox = actualLeitnerbox;function rememberedHovered() {&nbsp; &nbsp; leitnerbox += 1;&nbsp; &nbsp; activate();}function rememberedNotHovered() {&nbsp; &nbsp; leitnerbox = actualLeitnerbox;&nbsp; &nbsp; activate();}function didNotRememberHovered() {&nbsp; &nbsp; leitnerbox = 1;&nbsp; &nbsp; activate();}function didNotRememberNotHovered() {&nbsp; &nbsp; leitnerbox = actualLeitnerbox;&nbsp; &nbsp; activate();}function activate(){var header = document.getElementById("myDIV");var btns = header.getElementsByClassName("btn");for(let i = 0; i < btns.length; i++){&nbsp; &nbsp; btns[i].classList.remove("active");&nbsp;}for (var i = 0; i < leitnerbox; i++) {&nbsp; btns[i].classList.add("active");&nbsp;&nbsp; }}activate();.btn {&nbsp; border: none;&nbsp; outline: none;&nbsp; padding: 10px 16px;&nbsp; background-color: #f1f1f1;&nbsp; cursor: pointer;&nbsp; font-size: 18px;}/* Style the active class, and buttons on mouse-over */.active, .btn:hover {&nbsp; background-color: #666;&nbsp; color: white;}<button onmouseover="rememberedHovered()" onmouseout="rememberedNotHovered()" class="btn "> Remembered </button><button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button><div id="myDIV">&nbsp; <button class="btn">1</button>&nbsp; <button class="btn">2</button>&nbsp; <button class="btn">3</button>&nbsp; <button class="btn">4</button>&nbsp; <button class="btn">5</button>&nbsp; <button class="btn">6</button>&nbsp; <button class="btn">7</button></div>

Answer 2

你应该让每个功能做特定的任务此外，在这种情况leitnerbox下actualLeitnerbox是undefined，因为在 HTML 中，您调用这些函数时不带任何参数function rememberedHovered(leitnerbox) {&nbsp; // ...}function rememberedNotHovered(leitnerbox, actualLeitnerbox) {&nbsp; // ...}function didNotRememberHovered(leitnerbox) {&nbsp; // ...}function didNotRememberNotHovered(leitnerbox, actualLeitnerbox) {&nbsp; // ...}下面的片段应该可以帮助你var actualLeitnerbox = 4;var leitnerbox = actualLeitnerbox;var header = document.getElementById("myDIV");var btns = header.getElementsByClassName("btn");function hover(i) {&nbsp; btns[i].classList.add("active");}function unhover(i) {&nbsp; btns[i].classList.remove("active");}function hoverAll() {&nbsp; for (var i = 0; i < actualLeitnerbox; i++) hover(i)}function unhoverAll() {&nbsp; for (var i = 0; i < actualLeitnerbox; i++) unhover(i)}function rememberedHovered() {&nbsp; hover(actualLeitnerbox)}function rememberedNotHovered() {&nbsp; unhover(actualLeitnerbox)}function didNotRememberHovered() {&nbsp; unhoverAll()&nbsp; hover(0)}function didNotRememberNotHovered() {&nbsp; unhoverAll()&nbsp; hoverAll()}for (var i = 0; i < leitnerbox; i++) {&nbsp; btns[i].classList.add("active");}/* Style the buttons */.btn {&nbsp; border: none;&nbsp; outline: none;&nbsp; padding: 10px 16px;&nbsp; background-color: #f1f1f1;&nbsp; cursor: pointer;&nbsp; font-size: 18px;}/* Style the active class, and buttons on mouse-over */.active,.btn:hover {&nbsp; background-color: #666;&nbsp; color: white;}#myDIV {&nbsp; margin-top: 5rem;}<button onmouseover="rememberedHovered()" onmouseout="rememberedNotHovered()" class="btn "> Remembered </button><button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button><div id="myDIV">&nbsp; <button class="btn">1</button>&nbsp; <button class="btn">2</button>&nbsp; <button class="btn">3</button>&nbsp; <button class="btn">4</button>&nbsp; <button class="btn">5</button>&nbsp; <button class="btn">6</button>&nbsp; <button class="btn">7</button></div>