web-dev-qa-db-ja.com

画像を変更するためのjQueryトグル

画像を含む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に変更され、3回目にクリックするとxに戻ります。 png。

画像の変更ごとにjQueryを手動で指定せずにこれを行うことは可能ですか？ divをトラバースして画像名を見つけ、画像に-off/-onを追加するだけでいいですか？

ありがとう！

jquerycssuser-interfacecss-sprites
11
hejog

おそらく 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');
        }
    }
);
22
nikc.org

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"});
  }
);
10
jeroen.verhoest

CSSスプライトは確かにtheこれを行う方法ですが、完全を期すために、ここに別のオプションがあります。

通常、私は正規表現に到達する最後の人ですが、ここで役立つと思います

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

FWIW、プレーンCSSとbackground-imageを使用してこれを行うことをお勧めします。これは実際には通常の画像ではなく、「ボタン」であるように思えます。

1
Deniz Dogan

私はこのプラグインがあなたが尋ねたのと同じようなことをするのに役立つと思いました：

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

1
Steve Ingram
$('.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;    
    }
});
0
karim79

プラグインswapimgを作成しました： http://xuannd.wordpress.com/2010/12/03/jquery-swap-images-easy/
使用：$（ '。swapimg'）。swapimg（）;
opt：$（ '。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);
0
xuannd
$("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/

0
Syed