jQuery - 为鼠标事件动态替换图像源

Question

我有一个示例导航列表，其中包含图像作为按钮。当用户将鼠标悬停在按钮上和单击鼠标时，按钮有两种附加状态。每个按钮都有相同的命名约定，因此对于后退按钮将有“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>

Answer 1

试试这个：

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

Answer 2

将图像存储为数组，并通过索引引用它们。

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

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

粗略的例子，但你明白了。

edit：因为应用不太可行，所以去掉了动态创建。