帮助多个图像jquery悬停

Question

大家好，对不起，我是 Jquery 的新手。我一直试图用 CSS 做所有事情，但我试图为一个网站显着减少我的代码。 我想要做的是，当一个 div.class img 悬停时，它会同时更改 2 个图像的源文件。 我可以做到这一点，但我需要这两个图像具有不同的源文件。 我还试图保持代码足够简单，以便我可以在 HTML 中设置我的图像源，而不必在脚本中设置每个图像。这样做的原因是实际应用程序将有数百张图像。在 CSS 和脚本中定义翻转状态过于庞大和混乱。

这是我目前所拥有的。

    <script>
    $(function() {
       $(".on img").hover(
            function() {
    $(".on img").attr("src", $(".on img").attr("src").split(".").join("_hover."));
}, 
function() {
    $(".on img").attr("src", $(".on img").attr("src").split("_hover.").join("."));
        });
   });

    </script>

所以我使用 DIV 类来指定我想要更改或将被悬停的任何图像。 因此，当该类中的任何其他图像悬停时，任何图像都将具有该翻转状态。

现在的问题是，当该类中的所有图像都更改时，它们都会更改为相同的图像源，我需要它们更改为自己的图像源。所以 x.jpg 变成 x_hover.jpg 和 y.jpg 变成 y_hover.jpg 等等。

这是本示例的 HTML。

    <div class="on"><img src="api.jpg" /> </div>
    <div class="on"><img src="ex.jpg"  /></div>
    <div class="on"><img src="api.jpg" /> </div>
    <div class="on"><img src="ex.jpg"  /></div>

谢谢！！任何可以提供帮助的人，将不胜感激。我是 Jquery 的新手，我一直在寻找如何做到这一点。

-JK

Answer 1

我能想出的最简单的方法是更改​​悬停元素的src：

$('.on img').hover(
    function(){
        var cur = this.src.split('.');
        var extension = cur.pop();
        this.src = cur.join('.') + '_hover.' + extension;
    },
    function(){
        this.src = this.src.replace('_hover','');
    }
);

JS Fiddle demo.

---

编辑以回应来自@Jamie 的问题，在 cmets 中对此答案：

您知道如何将其应用于该 div 类中的所有图像，但将每个图像更改为它自己的图像吗？例如：a.jpg 更改为 a_hover.jpg，然后恢复为 a.jpg，而 b.jpg 更改为 b_hover.jpg，然后恢复为 b.jpg。如果光标悬停在该 div 类中的图像上，我希望所有这些图像同时更改。

下面的 jQuery 脚本会为您解决这个问题：

$('.on img').hover(
    function(){
        $('.on img').each(
            function(){
                var cur = this.src.split('.');
                var extension = cur.pop();
                this.src = cur.join('.') + '_hover.' + extension;
            });
    },
    function(){
        $('.on img').each(
            function(){
                this.src = this.src.replace('_hover','');
            });
    }

);

JS Fiddle demo.

已编辑 以修复上述网址，由于某种原因，该网址针对的是图片而不是演示。傻我……它现在链接到实际的演示。对不起。

Answer 2

我对正则表达式的看法

$('.on img').hover(function() {
  this.src = this.src.replace(/(.*)(\.[^.]+)$/, '$1_hover$2');
}, function() {
  this.src = this.src.replace(/_hover(\.[^.]+)$/, '$1');
});

小提琴： http://jsfiddle.net/nWc2D/

Answer 3

试试这个：

$(function() {
    $(".on img").hover(
            function() {
                   $(this).attr("src", $(this).attr("src").split(".").join("_hover."));
            } , 
            function() {
                   $(this).attr("src", $(this).attr("src").split("_hover.").join("."));
           });
   });

在这种情况下，$(this) 将为您提供悬停的图像，而不是该类的所有图像。