Js，在事件上将参数传递给函数

Question

我正在尝试将参数传递给我创建的函数，但是我想我缺少了一些东西……这就是我想要做的：在事件鼠标悬停时，单词及其翻译变红。 在事件mouseout上，这两个单词将返回黑色。 我从这一点开始-纯JavaScript（不涉及任何函数）：

<span id ="e1" onmouseover="document.getElementById('c1').style.color='red'"
      onmouseout = "document.getElementById('c1').style.color='black'"> House </span>

我知道我可以使用“ this.style.color”，但对于我的最终目标却没有用……所以，我使用了这种方法来创建函数。 事件发生时，参数将传递给函数，并为单词着色，并使用“ getElementById”进行标识。 我认为这是个好主意，应该是：

<span id ="e1" onmouseover="color(e1,f1)" onmouseout="uncolor(e1,f1)"> House </span>    

<span id ="f1" onmouseover="color(e1,f1)" onmouseout="uncolor(e1,f1)">  Maison </span>

<!-- The script in js would be: -->

<script>
function color(e, f) {
  document.getElementById("e").style.color = "red";
  document.getElementById("f").style.color = "red";   
}
function uncolor(e, f) {
  document.getElementById("e").style.color = "black";    
  document.getElementById("f").style.color = "black";
}
</script>

我知道这是关于传递参数的问题（我试图将单个参数传递给包含“ alert（arg）”的函数，但它不起作用）。 我发现以下事实：该函数将事件本身作为参数接收，但是我真的不知道这是正确的方向还是什么。

任何提示将不胜感激，谢谢。

Answer 1

第一种方法

您需要进行2次更新。

更新html（ 在参数周围添加引号 ）

<span id ="e1" onmouseover="color('e1','f1')" onmouseout="uncolor('e1','f1')"> House </span>    

<span id ="f1" onmouseover="color('e1','f1')" onmouseout="uncolor('e1','f1')">  Maison </span>

更新您的脚本（ 在函数中使用时删除引号 ）

<script>
function color(e, f) {
  document.getElementById(e).style.color = "red";
  document.getElementById(f).style.color = "red";   
}
function uncolor(e, f) {
  document.getElementById(e).style.color = "black";    
  document.getElementById(f).style.color = "black";
}
</script>

第二种方法

没有html更新。 将您的脚本更新为以下内容

<script>
function color(e, f) {
  e.style.color = "red";
  f.style.color = "red";   
}
function uncolor(e, f) {
  e.style.color = "black";    
  f.style.color = "black";
}
</script>

Answer 2

通过使用（this）更简单。

更新的代码

<span id ="e1" onmouseover="color(this)" onmouseout="uncolor(this)"> House </span>

<span id ="f1" onmouseover="color(this)" onmouseout="uncolor(this)">  Maison </span>

通过使用“ this”，您可以将全部控件传递给功能。

  function color(control) {
  control.style.color = "red";
  control.style.color = "red";   
  }

 function uncolor(control) {
  control.style.color = "black";    
  control.style.color = "black";
 }

Answer 3

也许我没有抓住重点，但是如果可能的话，所有这些都应该在CSS中完成。 您可以使用相邻的同级选择器+或常规同级选择器~来获取单词后出现的翻译。 但是，从翻译到先前的兄弟姐妹没有广泛支持的方法。 解决该问题的最简单方法是将两个元素都放在另一个容器中。

简化的HTML：

<div class="word-pair">
    <span id ="e1" class="word"> House </span>    
    <span id ="f1" class="translation">  Maison </span>
</div>

CSS：

div.word-pair span{
    color:#000;
    transition:all .2s ease-in-out;
}
div.word-pair:hover span {
    color:red;
}

小提琴示例： http : //jsfiddle.net/kw7wyux4/