Question

我正在使用javascript通过鼠标悬停功能在用html编写的其他标签上更改标签文本的颜色。例如：

function mouseoverbox1() {
  var mypara = document.getElementById("a1");
  mypara.style.color = "green";
}

<div onmouseover="mouseoverbox1()">
  <a id="a1">Color</a>
  <a id="a1">Names</a>
  <a id="a1">Places</a>
</div>

现在，当我运行代码时，标签“Color”的颜色变为绿色，而不是名称和位置。有没有办法我的函数可以接受所有类似id ???

的锚标签的更改

Answer 1

您应该使用类。

在Javascript中，您可以获得具有相同类的所有元素的数组。

＆＃13;

function handleBoxMouseover () {
  // Get all child elements with the class "a1" and save them into an array
  var childElements = document.getElementsByClassName('a1');

  // iterate through the new array and change the color by the array index
  for (var i = 0; i < childElements.length; i++) {
    childElements[i].style.color = 'green';
  }
}

＆＃13;

<div onmouseover="handleBoxMouseover()">
  <a class="a1">Color</a>
  <a class="a1">Names</a>
  <a class="a1">Places</a>
</div>

＆＃13;

仅供参考：

您也可以在childElements中添加一个类来更改颜色，而不是更改内联样式。

Answer 2

id必须是唯一的。使用document.querySelectorAll和类可以达到相同的目标，因为多个元素可以具有相同的class

＆＃13;

//get all the elements with same class name
// iterate it using array#forEach menthod
document.querySelectorAll('.a1').forEach(function(item) {
  // add event to each of the element
  item.addEventListener('mouseover', function(e) {
    this.style.color = "green";
  })
})

＆＃13;

<div>
  <a class="a1">Color</a>
  <a class="a1">Names</a>
  <a class="a1">Places</a>
</div>

＆＃13;

注意：这将在鼠标悬停时为单个文本着色，但如果要求一次为所有文本着色，则将eventhandler添加到父元素

Answer 3

在每个mouseoverbox1()上添加a，而不是使用参数div添加父this。然后在函数内部首先重置所有color的{{1}}属性。最后只将a设置为当前传递的color。

请注意： a在文档中应该是唯一的。您可以改为使用id。

尝试以下方式：

＆＃13;

class

＆＃13;

function mouseoverbox1(that){
  document.querySelectorAll("#tagContainer > a.a1").forEach(function(el){
    el.style.color = "";
  });
  that.style.color = "green";
}

＆＃13;

Answer 4

我的功能是否可以接受对所有人的更改具有类似id的锚标签???

Id必须是唯一的，否则您会遇到类似的问题。

也就是说，如果您想保持getElementById相同，则不应使用id，而是使用 querySelectorAll

function mouseoverbox1(){
    document.querySelectorAll("[id='a1']").forEach( function( ele ){
       ele.style.color = "green";
    });
}

<强>演示

function mouseoverbox1(){
    document.querySelectorAll("[id='a1']").forEach( function( ele ){
       ele.style.color = "green";
    });
}

<div onmouseover="mouseoverbox1()">
    <a id="a1">Color</a>
    <a id="a1">Names</a>
    <a id="a1">Places</a>
</div>

Answer 5

由于您已经拥有许多JS解决方案，我将发布针对此问题的最简单（也可能是最合适的）解决方案：CSS。

div a:hover {
  color: green;
}

<div>
  <a id="a1">Color</a>
  <a id="a1">Names</a>
  <a id="a1">Places</a>
</div>

如何使用javascript函数为多个具有相似ID的标记？

5 个答案: