Question

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

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

我知道我可以使用＆＃34; this.style.color＆＃34;但对于我的最终目标，这没有用...... 所以，我用这种方法来创建一个函数。在事件中，参数被传递给函数，并为单词着色，用＆＃34; getElementById＆＃34;标识它们。我认为这是一个好主意，它应该是：

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

我理解传递参数是一个问题（我试图将一个参数传递给一个包含＆＃34; alert（arg）＆＃34;的函数，但它不起作用）。我发现了一个事实，即函数接收事件本身作为一个论点，但我不知道它是正确的方向还是什么...

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

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>

使用＆＃34;这个＆＃34;你传递完全控制功能。

  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/

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

3 个答案: