0

我有一个选择图像的按钮，它的默认状态是“选择图像”，选择图像后，按钮的innerHTML更改为文件名。现在，我想做的是，如果我将鼠标悬停在按钮上，而它没有说“选择图像”，我希望它说“选择不同的图像”，然后 onmouseout 我希望它回到原来的状态之前（图像文件名）。

我将以下内容放在一起，但它不起作用......我对 JS 和 jQuery 选项持开放态度。

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    if (btn.innerHTML !== "Select Image") {
        var temp = btn.innerHTML;
        btn.onmouseover = btn.innerHTML = "Select a different image";
        btn.onmouseout = btn.innerHTML = temp;
    }
});

解决方案——感谢伊恩

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    btn.onmouseover = function () {
        if (this.innerHTML !== "Select Image") {
            var temp = this.innerHTML;
            this.innerHTML = "Select a different image";
        }
    };

    btn.onmouseout = function () {
        if (this.innerHTML !== "Select Image") {
            this.innerHTML = temp;
        }
    };
});
4

3 回答 3

0

试试这个：

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    if (btn.innerHTML !== "Select Image") {
        var temp = btn.innerHTML;
        btn.onmouseover = function () {
            this.innerHTML = "Select a different image";
        };

        btn.onmouseout = function () {
            this.innerHTML = temp;
        };
    }
});

您需要将.onmouseover和.onmouseout属性设置为函数。然后，您不妨使用this, 而不是btn.

更新：

我想你想把你的逻辑重新安排成这样：

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    var temp = btn.innerHTML;
    btn.onmouseover = function () {
        if (this.innerHTML !== "Select Image") {
            temp = this.innerHTML;
            this.innerHTML = "Select a different image";
        }
    };

    btn.onmouseout = function () {
        if (this.innerHTML !== "Select Image") {
            this.innerHTML = temp;
        }
    };
});

http://jsfiddle.net/3WkXp/

于 2013-02-08T06:29:58.193 回答
0

由于您使用的是 jQuery，因此可以将其写为

$(function(){
    var temp = $('#file-button').html();
    if (temp !== "Select Image") {
        $('#file-button').hover(function(){
            $(this).html('Select a different image')
        },function(){
            $(this).html(temp)
        });
    }
})

演示：小提琴

于 2013-02-08T06:33:24.193 回答
-1

试试这个

实际上，您仅在 btn 的 html ！== 时才绑定事件侦听器Select Image

var temp;
$("#file-button").mouseover(function() {
    if ($(this).html() !== "Select Image")
    {
        temp = $(this).html();
        $(this).html("Select a different Image");
    }
}).mouseout(function() {
    if ($(this).html() === "Select a different Image")
        $(this).html(temp);
});
于 2013-02-08T06:58:17.950 回答