jQuery切换来改变图像答案

【问题标题】：jQuery toggle to change imagejQuery切换来改变图像
【发布时间】：2013-07-09 15:53:36
【问题描述】：

我有一个包含图像的 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 附加到图像上吗？

谢谢！

【问题讨论】：

标签： jquery css user-interface css-sprites

【解决方案1】：

也许CSS sprites 对你有用？

这样可以避免每次单击图像（按钮？）时加载单独的图像，并且可以通过添加和删除 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');
        }
    }
);

【讨论】：

当用户点击按钮时，两种状态都将被加载并准备好，哦，你减少你的请求，这总是一个好主意:)
毫无疑问，这是我实现提问者需要的途径。

【解决方案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"});
  }
);

【讨论】：

在 jQuery 1.9 中移除

【解决方案3】：

CSS Sprites 确实是实现此目的的方式，但为了完整起见，这里有另一种选择。

通常我是最后一个使用正则表达式的人，但我认为他们会在这里提供帮助

$('.wizard-img').click(function() {
    var $img = $(this).find('img') ,
        src = $img.attr('src') ,
        onCheck = /\-on\.jpg$/ ,
        offCheck = /\-off\.jpg$/ ,
        normal = /\.jpg$/
    ;

    if(src.match(onCheck)) {
        $img.attr('src', src.replace(onCheck, '-off.jpg'));
    } else if (src.match(offCheck)) {
        $img.attr('src', src.replace(offCheck, '.jpg'));
    } else {
        $img.attr('src', src.replace(normal, '-on.jpg'));
    }
});

【讨论】：

【解决方案4】：

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

【讨论】：

每个“按钮”有不同的图像[和不同的切换图像]？
我不知道有多少图像，但如果只有几个，我建议的方法仍然有效 - 只需应用另一个类，例如“一”、“二”或“三”取决于按钮所处的状态。

【解决方案5】：

我发现这个插件对于做类似于你所要求的事情很有用：

http://www.malsup.com/jquery/cycle/

【讨论】：

【解决方案6】：

$('.wizard-img').click(function() {
    var img = $(this).find('img');
    var src = img.attr('src');

    //image is neither on nor off, so change src to on and return
    if(src != 'x-on.png' && src != 'x-off.png') {
        img.attr('src','x-on.png');
        return false;
    }

    //image is on, so change src to off and return
    if(src == 'x-on.png') {
        img.attr('src','x-off.png');
        return false;    
    }

    //image is off, so change src to x and return
    if(src == 'x-off.png') {
        img.attr('src','x.png');
        return false;    
    }
});

【讨论】：

抱歉，“x”是指 div 中图像的名称，所以应该是 nyt、theguardian 等……可以通过 jquery 选择吗？

【解决方案7】：

$("img").hover(
    function() { this.src = this.src.replace("_Off", "_On");},
    function() { this.src = this.src.replace("_On", "_Off");
});

http://kaidez.com/tutorial-simple-effective-jquery-image-rollover/

【讨论】：

【解决方案8】：

我创建了插件 swapimg：http://xuannd.wordpress.com/2010/12/03/jquery-swap-images-easy/
使用：$('.swapimg').swapimg();
选择：$('.swapimg').swapimg({imgOn:"_on.png", imgOff:".png"});

(function($){
    $.fn.swapimg=function(options){
        var defaults={imgOn:"_on.gif",imgOff:".gif"};
        var options=$.extend(defaults,options);
        var $isOn=false;
        var $obj_index=-1;
        return this.each(
            function(){
                if($(this).is('img')){
                    obj=$(this)
                }
                else{
                    obj=$(this).find('img')
                }
                obj.hover(
                    function(){
                        if(this.src.indexOf('_on')==-1){
                            $isOn=false
                        }else{
                            $isOn=true
                        }

                        if($isOn==false){
                            this.src=this.src.replace(options.imgOff,options.imgOn)
                        }
                    },
                    function(){
                        if($isOn==false){
                            this.src=this.src.replace(options.imgOn,options.imgOff)
                        }
                    }
                )
            }
        )
    }
})(jQuery);

【讨论】：