Question

将鼠标悬停在相同类型的通用元素上时，我想在将要执行动画的该元素上执行一个函数。但是，由于这些元素没有唯一的ID，因此我不确定如何在JavaScript中唯一标识它们。有没有办法使用这个关键词呢？我不想给他们所有唯一的ID，因为大量的相同元素似乎多余。任何帮助将不胜感激。

这里有一些我正在玩的代码，以尝试使其正常工作。最好使用简单的代码或更好地使用基本javascript。

$(document).ready(function(){
  $("span").hover(function(){
    this.color = red;
  });
});

Answer 1

red不是变量，而是字符串。因此您必须使用'red'：

要使用JavaScript设置颜色，您必须使用style属性：

$(document).ready(function(){
  $("span").hover(function(){
    this.style.color = 'red';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>

OR：：使用jQuery使用.css()

$(document).ready(function(){
  $("span").hover(function(){
    $(this).css({color: 'red'});
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>

Answer 2

您可以将用户类别用作选择器

为所有<span>元素赋予同一个类

尝试关注

    $('.hoverTest').hover(function(){
        $(this).css("color", "red");
        }, function(){
        $(this).css("color", "");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='hoverTest'>Your Span Element</span><br/>
<span class='hoverTest'>Span 1</span><br/>
<span class='hoverTest'>Span 2</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span n</span>

有关更多详细信息，请参见Jquery Hover()

将鼠标悬停在元素上（没有唯一ID）调用函数

2 个答案: