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

我有一个以图像为按钮的导航列表示例。当用户将鼠标悬停在按钮上和单击鼠标时，按钮还有两种附加状态。每个按钮都有相同的命名约定，因此对于back按钮，将有“back.jpg”、“back_over.jpg”和“back_down.jpg”。因为一个页面上有几个按钮，所以我的目标是获取所选图像源的路径，然后通过添加/删除路径的适当部分对其进行修改

我有一个工作的例子，但我觉得它可以更优雅。例如，我非常确定，将3个图像路径中的每一个存储为变量并以某种方式传递它们是可能的。但是当我尝试这种方法时，imgsrc无法正确地追加或删除。我也知道这是可能的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>

将图像存储为数组，并按索引引用它们

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

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

简单的例子，但你明白了

编辑：删除动态创建，因为应用程序不太可行。

尝试以下操作：

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

---

您的if语句正在设置src

if（$（this）.attr（'src'，downImgSrc））

顺便说一句，mouseleave案例中的额外位是为了防止在用户单击按钮然后在释放之前拖出鼠标时错误追加iamge src。src将在下一个事件中更改，因此，在这个场景中，他将一次又一次地追加“_over.jpg”。他正在进行字符串替换，而不是追加。。。如果没有比赛，我就把它留在汉克斯。实际上，我在这里要学习的是更多关于如何操作img src路径的知识。我觉得一些不同的观点会增加我对jQuery的理解。我喜欢它，我从来没有想过要这样尝试。非常感谢！