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

Question

您好我是 javascript 的新手，正在尝试创建以下功能。我有 7 个按钮。其中一些从一开始就悬而未决。这取决于从数据库中获取的数值。因此，当数据库中的这个值为 4 时，将悬停 4 个按钮但是，当悬停在“记住”或“不记得”按钮时，如下图所示。悬停的按钮数量应该会暂时改变。当悬停“记住”时 - 按钮 5 也应该悬停。当“Remembered”未悬停时 - 只有 4 个按钮应该再次悬停。当“DidNotRemember 悬停”时 - 只有按钮 1 应该悬停。当“DidNotRemember”未悬停时 - 只有 4 个按钮应该再次悬停。下面是我的方法，我不太明白为什么它不起作用。我的代码：var actualLeitnerbox = 4; // Dummy value. Will normally be fetched from databasevar 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++) {

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

}

只会在第一次加载时起作用，但当您将鼠标悬停在按钮上时不会改变任何东西。所以你也需要它作为一个函数并将它放在你的 onHover 函数中。你还需要稍微改变一下这部分。由于按钮的数量active发生变化，您将不得不以某种方式停用它们。

我希望这是您想要的功能：

var actualLeitnerbox = 4;

var leitnerbox = actualLeitnerbox;

function rememberedHovered() {

    leitnerbox += 1;

    activate();

}

function rememberedNotHovered() {

    leitnerbox = actualLeitnerbox;

    activate();

}

function didNotRememberHovered() {

    leitnerbox = 1;

    activate();

}

function didNotRememberNotHovered() {

    leitnerbox = actualLeitnerbox;

    activate();

}

function activate(){

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

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

for(let i = 0; i < btns.length; i++){

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

}

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

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

  }

}

activate();

.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 2

你应该让每个功能做特定的任务

此外，在这种情况leitnerbox下actualLeitnerbox是undefined，因为在 HTML 中，您调用这些函数时不带任何参数

function rememberedHovered(leitnerbox) {

  // ...

}

function rememberedNotHovered(leitnerbox, actualLeitnerbox) {

  // ...

}

function didNotRememberHovered(leitnerbox) {

  // ...

}

function didNotRememberNotHovered(leitnerbox, actualLeitnerbox) {

  // ...

}

下面的片段应该可以帮助你

var actualLeitnerbox = 4;

var leitnerbox = actualLeitnerbox;

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

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

function hover(i) {

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

}

function unhover(i) {

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

}

function hoverAll() {

  for (var i = 0; i < actualLeitnerbox; i++) hover(i)

}

function unhoverAll() {

  for (var i = 0; i < actualLeitnerbox; i++) unhover(i)

}

function rememberedHovered() {

  hover(actualLeitnerbox)

}

function rememberedNotHovered() {

  unhover(actualLeitnerbox)

}

function didNotRememberHovered() {

  unhoverAll()

  hover(0)

}

function didNotRememberNotHovered() {

  unhoverAll()

  hoverAll()

}

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;

}

#myDIV {

  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">

  <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>