0

我会尽量在这里说清楚。

我从这个演示页面上的“EFFECT 2”格式开始。 http://tympanus.net/Tutorials/CaptionHoverEffects/index2.html （在这里找到源代码http://tympanus.net/codrops/2013/06/18/caption-hover-effects/）

理想情况下，我想要创建一种效果，当您单击标题中的“查看”按钮时，它会触发该 div 中的图像从一个图像变为备用图像。

这里的麻烦是我不想为每张图像一遍又一遍地重复大量代码。有没有一种简单的方法可以做到这一点，所以它适用于所有这些元素？（我试图坚持 DRY（不要重复自己）哲学。

我无法理解如何实现这一点，因为我对 JQuery 很陌生。我设法通过悬停效果实现了这种效果，但是在弄清楚如何识别和获取图像并从远程按钮将特定图像换成另一个图像时遇到了麻烦。通常对于悬停效果，可以只使用 $(this)。

谢谢你的帮助！

4

2 回答 2

0

看起来这样会起作用：

$(document).ready(function(){
    $("ul.cs-style-2 figcaption a").click(function(clickEvent){
        // Find the containing figure
        var parentFigure = $(this).closest("figure");          

        // Find the child image
        var figureImage = parentFigure.children("img");

        // Change the image's src attribute
        figureImage.attr("src", "http://tympanus.net/Tutorials/CaptionHoverEffects/images/6.png");

        clickEvent.preventDefault();
    }); 
});
于 2013-06-20T03:37:09.687 回答
0

非常感谢您的回答帕特里克！我已经用一些“摆弄”（请原谅双关语）弄清楚了最后一部分。

$(document).ready(function(){
$("ul.cs-style-2 figcaption a").click(function(clickEvent){
    var parentFigure = $(this).closest("figure");        
    var figureImage = parentFigure.children("img");
    var originalSrc = figureImage.attr("src");
    var altSrc = figureImage.attr("data-altsrc");

    if(altSrc) {
      figureImage.attr("src", altSrc); 
      figureImage.attr("data-altsrc", originalSrc); //Added this part and it worked!
      clickEvent.preventDefault();
    }
});

});

于 2013-06-20T15:43:51.173 回答