Question

我有一堆WordPress帖子在2x8网格中吐出。我给了他们所有的课程。我有以下代码，我的目标是获取div.post，我将鼠标悬停在每次将鼠标悬停在其上（或其他帖子）时更改的颜色。

var colors = ['rgba(0, 163, 235, 0.7)', 'rgba(209, 28, 9, 0.7)', 'rgba(255, 232, 45, 0.9)', 'rgba(136, 18, 6, 0.7)', 'rgba(0, 110, 159, 0.7)', 'rgba(224, 199, 0, 0.9)']

var i = 0;

var element = document.getElementsByClassName('post');

element.onmouseover = function() {
  console.log("Hello");
  var color = colors[i]
  this.style.backgroundColor = color;
}

element.onmouseout = function() {
  this.style.backgroundColor = "transparent";

  if (i >= 5) {
  i = 0;
  }
  else {
    i++;
  }
}

当我执行getElementById时，我可以让第一个工作，但没有其他工作（可能是因为我不应该在页面上多次使用相同的ID，所以我把它从我的循环中取出）

PS我需要一个没有jQuery的答案。（我已经知道使用jQuery更容易，并且在jQuery中有一个解决方案，但我的任务是不使用它）

@nnnnnn给我的回答是指向一个类似的问题，对于任何好奇这是我的工作代码。

var element = document.getElementsByClassName('post');

for (var i = 0; i < element.length; i++) {
  element[i].onmouseover = function() {
    console.log("Hello");
    var color = colors[j]
    this.style.backgroundColor = color;
  }

  element[i].onmouseout = function() {
    this.style.backgroundColor = "transparent";

    if (j >= 5) {
    j = 0;
    }
    else {
      j++;
    }
  }
}

无法使用getElementsByClassName（）wordpress帖子

0 个答案: