jQuery切换以更改图像 [英] jQuery toggle to change image

问题描述

我有一个包含图片的div列表：

I have a list of divs with images in them:

<div class="wizard-img"><%= image_tag("sources/pix/nyt.png") %></div>
<div class="wizard-img"><%= image_tag("sources/pix/theguardian.png") %></div>

当用户单击div时，我想将其更改为x-on。 png，当再次点击时，它将变成x-off.png，当第三次点击它时，它应该还原为x.png。

When a user clicks the div, I'd like it to change the image to x-on.png, when clicked again, it'll change to x-off.png, and when clicked a third time it should revert to x.png.

这样做没有手动指定jQuery每个图像更改？我可以遍历div并找到图像名称，只需将-off / -on添加到图像中即可。

Is it possible to do this without manually specifying jQuery for every image change? Can I traverse the div and find the image name, and simply append the -off/-on to the image?

谢谢！

推荐答案

也许 CSS sprites 会为您工作吗？

这样可以避免您每次点击图片时加载单独的图片（按钮？），您可以通过添加和删除一个css类，例如：

That would save you from loading a separate image every time you click the image (button?), and you could solve your problem by adding and removing a css-class, e.g.:

$('.wizard-img').click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off');
        } else {
            $(this).addClass('on');
        }
    }
);

这篇关于jQuery切换以更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！