jQuery 从 6 个 "toggle"Divs 切换主图像

Question

所以我对 jQuery 有点陌生 - 我了解基础知识，但我的掌握程度很低。

我基本上有 2 行，每行三个 col-md-4 bootstrap div，每个都链接到一个图像。

我写的 jQuery 实在是太臃肿了，但我不确定有什么方法可以做得更好。我查看了 toggleclass、toggle、hover 等，但没有一个达到我想要的效果。

我编写它的方式在六个 div 之一上有一个事件类，并“显示”了相应的图像。我基本上只是根据鼠标悬停的内容添加或删除要显示的类:无或显示: block ，直到另一个 div 悬停在上面。

这是代码，基本上重复了6次。

jQuery('.seoblock').mouseover(function() {
        jQuery('.seoimage').addClass('todisplay');
        jQuery('.brandingimage').removeClass('todisplay');
        jQuery('.mobileimage').removeClass('todisplay');
        jQuery('.optimizationimage').removeClass('todisplay');
        jQuery('.supportimage').removeClass('todisplay');
        jQuery('.commerceimage').removeClass('todisplay');
        jQuery('.seoblock').addClass('todisplayblock');
        jQuery('.brandingblock').removeClass('todisplayblock');
        jQuery('.mobileblock').removeClass('todisplayblock');
        jQuery('.optimizationblock').removeClass('todisplayblock');
        jQuery('.supportblock').removeClass('todisplayblock');
        jQuery('.commerceblock').removeClass('todisplayblock');
});

所有图像都在一行中，最初未显示。我使用 addClass 显示了第一张图片。

你们能给我指出正确的概念方向吗？我试图想办法用“this”命令实现它，但由于该类没有添加到它悬停在其上的 div 中，我无法弄清楚如何实现这种效果。

或者也许这段代码很好用？唯一的问题是我想让它在图像之间淡入淡出，这是它现在唯一不能做的事情。

这是一张图片。

这是一个fiddle .

非常感谢!

Answer 1

你可以尝试类似的东西

<!-- Add a class images -->
<div class="col-lg-12 images">
    <img src="http://www.clker.com/cliparts/N/y/j/v/U/T/green-a-md.png" class="img-responsive supportimage displaynone" />
    <img src="https://www.havefunteaching.com/wp-content/uploads/2013/06/letter-a.png" class="img-responsive seoimage displaynone" />
    <img src="http://www.runlounge.com/wp-content/uploads/2014/08/A.jpg" class="img-responsive brandingimage displaynone" />
    <img src="http://3.bp.blogspot.com/-3aPQIa6qALA/TZXW_YdmWTI/AAAAAAAAX7E/RNAMMoj05fs/s400/A.jpg" class="img-responsive mobileimage displaynone" />
    <img src="http://www.askingmatters.com/wp-content/uploads/2012/07/1242257617140579084NYCS-bull-trans-A.svg_.med_.png" class="img-responsive optimizationimage displaynone" />
    <img src="http://englishschooljapan.com/wp-content/uploads/2013/04/a_clipart.jpg" class="img-responsive commerceimage displaynone" />
</div>

然后

<!-- Add a class `block-trigger` and attribute `data-img`(this will have the class for the image to be displayed)-->
<div class="col-lg-4 brandingblock hoverwhite hoveractive block-trigger" data-img=".brandingimage">
    ...
</div>

然后

jQuery(function($) {
    $('.brandingimage').addClass('todisplay');
    var $imgs = $('.images img');
    $('.block-trigger').mouseover(function() {
        var $img = $($(this).data('img')).addClass('todisplay');
        $imgs.not($img).removeClass('todisplay');
    });
});

演示:Fiddle