0

画像をボタンとして使用したサンプル ナビゲーション リストがあります。ユーザーがボタンの上にカーソルを置いたときとマウスがクリックされたときのボタンには、2 つの追加の状態があります。各ボタンの命名規則は同じなので、戻るボタンには「back.jpg」、「back_over.jpg」、「back_down.jpg」があります。ページにはいくつかのボタンがあるため、私の目標は、選択した画像のソースのパスを取得し、パスの適切な部分を追加/削除して変更することです。

実用的な例がありますが、もっとエレガントになると思います。たとえば、3 つの画像パスのそれぞれを変数として保存し、何らかの方法で渡すことができると確信しています。しかし、その方法を試したところ、img src が正しく追加または削除されませんでした。また、これはCSSで可能であることも知っています。これはすでに行っています。これは主に、jQuery の理解を深めるためです。 

    $(document).ready(function() {

        $('li > img').bind('mouseenter mousedown mouseup mouseleave click', function(event) {

            var overImgSrc = $(this).attr('src').match(/[^\.]+/) + '_over.jpg';
            var downImgSrc = $(this).attr('src').replace('_over.jpg', '_down.jpg');
            var upImgSrc = $(this).attr('src').replace('_down.jpg', '_over.jpg');
            var outImgSrc = $(this).attr('src').replace('_over.jpg', '.jpg');

            var evtType = event.type;

            switch (evtType) {
                case 'mouseenter':
                $(this).attr('src', overImgSrc);
                break;

                case 'mousedown':
                $(this).attr('src', downImgSrc);
                break;

                case 'mouseup':
                $(this).attr('src', upImgSrc);
                break;

                case 'mouseleave':
                    if ($(this).attr('src', downImgSrc)) {
                        var downOutImgSrc = $(this).attr('src').replace('_down.jpg', '.jpg');
                        $(this).attr('src', downOutImgSrc);
                    }
                    else {
                        $(this).attr('src', outImgSrc);
                    }
                break;

                case 'click':
                alert("Yowza!");
                break;

                default:
                break;
            }
        });
    });

HTML

<ul id="nav">
        <li><img src="images/Back.jpg"></li>
        <li><img src="images/Next.jpg"></li>
</ul>
4

2 に答える 2

2

これを試してください：

$(document).ready(function() {
    $('li > img').bind('mouseenter mousedown mouseup mouseleave click', function(event) {
        var images = {
            'mouseenter' : '_over.jpg',
            'mousedown'  : '_down.jpg',
            'mouseup'    : '_over.jpg',
            'mouseleave' : '.jpg',
        };

        //Store the original source without the extension.
        if (this.originalSource == undefined) {
            this.originalSource = this.src.substring(0, this.src.lastIndexOf('.'));
        }

        var evtType = event.type;

        //Append the affector.
        if (evtType in images) {
            this.src = this.originalSource + images[evtType];
        }

        //Handle your click event. (left the switch event in case you want to do something else with other events)
        switch (evtType) {
        case 'click':
            alert("Yowza!");
            break;
        default:
        }
    });
});
于 2013-01-11T17:34:28.310 に答える
0

画像を配列として保存し、インデックスで参照します。

var $images = ['image1.jpg','image2.jpg'];

case 'mouseenter':
    $(this).attr('src', $images[0]);
    break;

大まかな例ですが、アイデアはわかります。

編集: アプリケーションがあまり実現可能ではないため、動的作成を削除しました。

于 2013-01-11T17:26:12.503 に答える