Javascript jQuery-在图像上悬停将类添加到具有相同类的另一个元素

我正在努力使用jQuery扬声器图像网格。我想在图像悬停文本在黄色框中更改为这个悬停扬声器数据（他们有相同的类）。因此，例如，当我将鼠标悬停在第一个黑匣子（图像）上时，我应该看到扬声器1数据（默认情况下，第一个是可见的），然后在第二个黑匣子（图像）上悬停时，我应该看到扬声器2数据等。扬声器图像和扬声器数据具有相同的类，如

。speaker-1

，

。speaker-2

，

.speaker-3

。。。我想添加class

.active

，然后更改特定的文本可见性

我的初始代码是：，但看起来有很多不必要的类在重复。我将非常感谢你的帮助

HTML

---

我没有给元素一个class

speaker-*

，而是给了它们一个数据属性，

data speaker=“speaker-*”

。 然后可以在jQuery中使用它。我添加了一些注释来解释发生了什么

$（'.speaker image'）。在（'mouseenter'，function（）上{
var speaker=$（this）.data（'speaker'）；/*根据数据属性（data speaker）获取说话人*/
$（'.speaker info'）.removeClass（'active'）；/*删除所有.speaker info div的活动类*/
$（'..+speaker）.addClass（'active'）；/*将活动类添加到右侧div*/
})

.speakers容器{
显示：网格；
网格模板列：重复（3，1fr）；
gap:35px；
}
.扬声器容器img{
最大宽度：100%；
}
.发言者信息{
背景颜色：黄色；
填充：10px；
}
.发言人信息{
显示：无；
}
.speaker-info.active{
显示：块；
}

发言人1姓名

发言人1公司

发言人2姓名和姓氏

发言人2公司

发言人3姓名和姓氏

发言人3公司

发言人4姓名和姓氏

发言人4公司

发言人5姓名和姓氏

发言人5公司

所有带有html和jQuery的代码都在我的JSFIDLE链接中-为什么您只在其中一个元素上处理悬停事件-

。speaker-2

？因为我正在寻找比添加每个speaker-1、speaker-2、speaker-3等更好的方法。您可能需要在这个元素上进行扩展，但我想这就是您想要的<代码>$（.speaker info”）.on（“悬停”，函数（）{$（.speaker info”）.removeClass（“活动”）；$（this.addClass（“活动”）；}）类似的选项是向两个元素添加相同的

数据扬声器

，然后使用

$（“[data speaker=“+speaker+”]）

。没有真正的区别，只是另一种链接方式。非常感谢！这很有效，而且是一种更好的方法，你是对的。为什么不直接针对

class=“speaker image speaker-X”

？我需要一个正则表达式来确定

speaker-X

值。使用

data-*

属性对我来说更容易

<div class="speakers-container">
  <div class="speaker-image speaker-1"><img src="https://dummyimage.com/600x400/000/fff" alt="photo"></div>
  <div class="speaker-information">
    <div class="speaker-info speaker-1 active">
      <p class="name">Speaker 1 Name and Surname</p>
      <p class="company">Speaker 1 Company</p>
    </div>
        <div class="speaker-info speaker-2">
      <p class="name">Speaker 2 Name and Surname</p>
      <p class="company">Speaker 2 Company</p>
    </div>
        <div class="speaker-info speaker-3">
      <p class="name">Speaker 3 Name and Surname</p>
      <p class="company">Speaker 3 Company</p>
    </div>
        <div class="speaker-info speaker-4">
      <p class="name">Speaker 4 Name and Surname</p>
      <p class="company">Speaker 4 Company</p>
    </div>
    <div class="speaker-info speaker-5">
      <p class="name">Speaker 5 Name and Surname</p>
      <p class="company">Speaker 5 Company</p>
    </div>
  </div>
  <div class="speaker-image speaker-2"><img src="https://dummyimage.com/600x400/000/fff" alt="photo"></div>
  <div class="speaker-image speaker-3"><img src="https://dummyimage.com/600x400/000/fff" alt="photo"></div>
  <div class="speaker-image speaker-4"><img src="https://dummyimage.com/600x400/000/fff" alt="photo"></div>
  <div class="speaker-image speaker-5"><img src="https://dummyimage.com/600x400/000/fff" alt="photo"></div>
</div>

$(".speaker-2").hover(
  function() {
    $('.speaker-2').addClass('active');
    $('.speaker-1').removeClass('active');
  },
  function() {
    $('.speaker-1').addClass('active');
    $('.speaker-2').removeClass('active');
  }
);