javascript - 图像悬停时的 jQuery 简单文本更改

Question

我正在尝试创建一个脚本来更改图像悬停时的文本。这是简单版本的 HTML:

  <section id="#first">
    <div class="img-1"></div>
    <div class="img-2"></div>
  </section>

  <section id="#second">
    <div class="text-1"></div>
    <div class="text-2"></div>
  </section>

Javascript

jQuery(document).ready(function($){
  $('.img-1').hover(
     function(){ $('.text-1').addClass('text-1-active') },
     function(){ $('.img-1').addClass('img-1-active') },
     function(){ $('.text-2').removeClass('text-2-active') },
     function(){ $('.img-2').removeClass('img-2-active') }
)
$('.img-2').hover(
     function(){ $('.text-2').addClass('text-2-active') },
     function(){ $('.img-2').addClass('img-2-active') },
     function(){ $('.img-1').removeClass('img-1-active') },
     function(){ $('.text-1').removeClass('text-1-active') }
)

});

无法更改 HTML 结构。这些类会被添加但不会被删除。

FIDDLE

Answer 1

:) 实际上这就是您所需要的:DEMO

$("#first [class^=img-]").hover(function() {
    $('#second .text-'+ this.className.replace(/\D/g,'')).toggle();
});

---

如果你想切换类？没有比这更简单的了:DEMO

$("#first [class^=img-]").hover(function() {
    $(this).toggleClass("wow");
    $('#second .text-'+ this.className.replace(/\D/g,'')).toggleClass("wow");
});

为了解释上面的内容，您只需要找出悬停元素的编号，并按编号引用所需的.text-。 N 个元素。

还有这个<section id="#first"> , 那#first 不是为 HTML 元素设置 ID 的方式。
简单地使用 <section id="first">