jquery - 帮助多图像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 demo .

---

已编辑，以回应 @Jamie 对此答案的评论中的问题:

Do you know how I can make this apply to ALL images that are in that div class, but have each image change to it's own image? For example: a.jpg to change to a_hover.jpg, then back to a.jpg while b.jpg changes to b_hover.jpg, then revert back to b.jpg. I want all of these image to change at the same time, if the cursor is hovering an image in that div class.

下面的 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 .

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