帮助多图像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 so。

    <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 演示。

---

Edited in response to question, in comments to this answer, from @Jamie:

你知道我如何使它适用于该 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 演示。

已编辑以修复上述 URL，由于某种原因，该 URL 是图像而不是演示。愚蠢的我......它现在链接到实际的演示。对不起。

Answer 2

只是我对正则表达式的看法

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

Fiddle: 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) 将为您提供悬停图像，而不是该类的所有图像。