javascript - 有没有一种简单的方法可以通过相应的 img hover jquery 来定位这些 h2 中的每一个

Question

我有六张图片，悬停时它们会淡出静态引用并将其替换为图片引用。

报价位于所有图像下方的一行中。

有没有一种简单的方法可以定位 img 来引用？这是我目前所拥有的

     div class="top-icons">
  <div class="span2 first">
    <a href="http://19610.hs-sites.com/inbound-marketing">
        <img src="http://cdn2.hubspot.net/hub/19610/file-511184919-png/img/inbound-icon.png?t=1392133012000" alt="Inbound Marketing" />
      </a>
  </div>
  <div class="span2 2nd">
    <a href="http://19610.hs-sites.com/web-design-optimization">
        <img src="http://cdn2.hubspot.net/hub/19610/file-511189334-png/img/webdesign-icon.png?t=1392133011000" alt="Web Site Design and Development" />
    </a>
  </div>
  <div class="span2 3rd">
    <a href="http://19610.hs-sites.com/search-engine-optimization">
        <img src="http://cdn2.hubspot.net/hub/19610/file-517790482-png/img/seo-icon.png?t=1392133014000" alt="Search Engine Optimization" />
    </a>
  </div>

</div>

    <div class="clear"></div>

    <div class="quotes">
        <h2 class="main">Quote Affiated with Each Image</h2>
        <h2 class="one">Inbound Marketing</h2>
        <h2 class="two">Web Design and Development</h2>
    </div>

Jquery 必须有一种更简单、更有效的方法，我也会在悬停时获得重复的文本。

$('.first').hover(
    function() {
        $('.quotes').find('.main').fadeOut('slow', function() {
            $('.quotes').find('.one').fadeIn('slow');
        })
    },
    function() {
        $('.quotes').find('.one').fadeOut('slow', function() {
            $('.quotes').find('.main').fadeIn('slow');
        })
    }
);

$('.2nd').hover(
    function() {
        $('.quotes').find('.main').fadeOut('slow', function() {
            $('.quotes').find('.two').fadeIn('slow');
        })
    },
    function() {
        $('.quotes').find('.two').fadeOut('slow', function() {
            $('.quotes').find('.main').fadeIn('slow');
        })
    }
);

$('.3rd').hover(
    function() {
        $('.quotes').find('.main').fadeOut('slow', function() {
            $('.quotes').find('.three').fadeIn('slow');
        })
    },
    function() {
        $('.quotes').find('.one').fadeOut('slow', function() {
            $('.quotes').find('.three').fadeIn('slow');
        })
    }
);

fiddle 在这里 http://jsfiddle.net/KzZQU/13/

Answer 1

这是适用于您当前 HTML 的内容。

Javascript:

$('.span2').hover(function() {
    var i = $('.span2').index(this),
        quote = $('.quotes h2').not('.main').get(i);

    $('.main').hide();
    $(quote).stop().fadeIn();     
}, function() {
    $('.quotes h2').hide();
    $('.main').stop().fadeIn();
});

示例:http://jsfiddle.net/95Zkw/

尽管像其他人建议的那样拥有自定义属性是一种更简洁的解决方案。