无限次循环遍历颜色数组

Question

我有一个默认背景颜色（黑色）的按钮。将鼠标悬停在此按钮上时，我想更改此按钮的背景颜色（来自数组）。我让它在基本层面上工作，但我希望它一遍又一遍地重复循环。 这就是我目前所拥有的。

var color = ['#3e50a2', '#faa51a', '#ed1c24', '#2a9446'];
var i = -1;

document.querySelector('.customBtn').addEventListener('mouseover', function() {
  i = 1 < color.length ? ++i : 0;
  document.querySelector('.customBtn').style.background = color[i]
});
document.querySelector('.customBtn').addEventListener('mouseout', function() {
  document.querySelector('.customBtn').style.background = '#000';
})

<a class="customBtn">Button</a>

Answer 1

我认为您尝试使用此 i = 1 < color.length ? ++i : 0; 重置 i 的值，但它没有。这将不断增加值而不会重置它，因为 1 总是小于数组的长度。

我认为您的意思是增加该值，然后在它太大时重置：

i = ++i < color.length ? i : 0;

这是完整的代码。我重构了查询选择器，因为没有必要多次这样做，并更改了mouseout 背景颜色，以便您可以阅读按钮

var color = ['#3e50a2', '#faa51a', '#ed1c24', '#2a9446'];
var i = -1,
    btn = document.querySelector('.customBtn');

btn.addEventListener('mouseover', function() {
  i = ++i < color.length ? i : 0;
  btn.style.background = color[i];
});

btn.addEventListener('mouseout', function() {
  // revert to default colour
  btn.style.background = '';
})

<input type="button" class="customBtn" value="My button" />

Answer 2

只需将i = 1 < color.length ? ++i : 0; 替换为i = (i+1 < color.length) ? ++i : 0;。就是这样。

var color = ['#3e50a2', '#faa51a', '#ed1c24', '#2a9446'];
var i = -1;

document.querySelector('.customBtn').addEventListener('mouseover', function() {
  i = (i+1 < color.length) ? ++i : 0;
  document.querySelector('.customBtn').style.background = color[i]
});

document.querySelector('.customBtn').addEventListener('mouseout', function() {
  document.querySelector('.customBtn').style.background = '#000';
})

<a class="customBtn">Button</a>

Answer 3

如果必须使用 javascript，请看第二个示例。

纯 CSS 解决方案

您可以使用CSS animation 来完成此操作，这样会更高效且不易出错。除非有特定原因需要在这里使用 javascript，否则我强烈推荐这种方法。

可以修改此示例以进行硬转换，而不是从一种颜色渐变到另一种颜色，但这里有一个快速演示：

button {
  background: black;
  color: white;
  border: none;
  padding: 0.5em 1em;
}

button:hover {
  animation: buttonhover 1s infinite;
}

@keyframes buttonhover {
  0% {
    background: #3e50a2;
  }
  25% {
    background: #faa51a;
  }
  50% {
    background: #ed1c24;
  }
  75% {
    background: #2a9446;
  }
}

<button>Hello</button>

---

Javascript 解决方案

如果您出于某种原因必须使用 javascript，您可以使用 % operator 来避免超出颜色数组的末尾：

const colors = ['#3e50a2', '#faa51a', '#ed1c24', '#2a9446'];
let index = 0;
let interval;

const hover = (e) => {
  interval = setInterval(() => {
    e.target.style.backgroundColor = colors[index];
    index = (index + 1) % colors.length;
  }, 300);
}

document.querySelector('button').addEventListener('mouseover', hover);
document.querySelector('button').addEventListener('mouseout', (e) => {
  clearInterval(interval);
  e.target.style.backgroundColor = 'black';
});

button {
  background: black;
  color: white;
  border: none;
  padding: 0.5em 1em;
}

<button>Hello</button>