jQuery切换到更改图像

Question

我有一个包含图像的div列表:

<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.

是否可以在不为每次图像更改手动指定jQuery的情况下执行此操作？我可以遍历div并找到图像名称,只需将-off/-on附加到图像上吗？

谢谢!

Answer 1

也许CSS精灵会对你有用吗？

这样可以避免每次单击图像(按钮？)时加载单独的图像,并且可以通过添加和删除css类来解决问题,例如:

$('.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');
        }
    }
);

Answer 2

http://docs.jquery.com/Events/toggle

$(".wizard-img").toggle(
  function () {
    $(this).find("img").attr({src:"x-on.png"});
  },
  function () {
    $(this).find("img").attr({src:"x-off.png"});
  },
  function () {
    $(this).find("img").attr({src:"x.png"});
  }
);

Answer 3

FWIW，我建议您使用纯 CSS 和background-image. 在我看来，这并不是真正的普通图像，而是“按钮”。