11

画像を含む 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.png

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

ありがとう！

4

8 に答える 8

22

おそらく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');
        }
    }
);
于 2009-06-30T10:36:30.137 に答える
10

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"});
  }
);
于 2009-06-30T10:39:35.810 に答える
3

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

通常、正規表現にたどり着くのは私が最後ですが、ここで役立つと思います

$('.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'));
    }
});
于 2009-06-30T11:01:31.677 に答える
1

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

于 2009-06-30T09:44:06.107 に答える
1

このプラグインは、あなたが尋ねたことと同様のことを行うのに役立つことがわかりました:

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

于 2011-04-19T12:38:07.720 に答える
0 
$('.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;    
    }
});
于 2009-06-30T09:48:23.853 に答える
0 
$("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/

于 2013-01-04T21:06:47.407 に答える