javascript - 获取按钮的背景图像并更改它

Question

我有一个包含一系列按钮的单行表。每个按钮都有自己独特的图像。当用户将鼠标悬停在每个按钮上时，我想更改图像。我的所有图像都是预加载的，所以现在我只处理迭代集合、确定其图像并更改该图像的部分。首先是 HTML:

<table><tr id='menu_row'>
    <td id='home'>
        <button id='btn_home' onclick="btnHome()">
            <img src="images/home_green.png">
        </button>
    </td>

    <td id='capabilities'>
        <button id='btn_capabilities' onclick="btnCapabilities()">
            <img src="images/capabilities_green.png">
        </button>
    </td>

    ...

 </tr></table>

我成功地识别了该集合，因为我的控制台输出与我的预期相符。但我坚持捕捉图像。此代码不会引发任何错误，但也不会切换图像

$("#menu_row").find('button').hover(function() {
    flipColor(event.target.id);}
);

function flipColor(btn_id) {
    console.log(btn_id); // this shows the correct output

    // this is where things go south
    var image = document.getElementById(btn_id);

    // this will expand into a switch statement eventually
    image.src = home_blue.src;
}

对象home_blue.src在预加载器函数中实例化:

home_blue     = new Image();
home_blue.src = "http://www.xxxxx.com/images/home_blue.png";

如果有更好的方法，我很高兴听到它们。谢谢!

Answer 1

如果您要使用 jQuery，请使用 jQuery:

$("#menu_row").find('button').hover(function () {
    flipColor(this.id);
});
function flipColor(btn_id) {
    $('#'+btn_id).find('img').prop('src', home_blue.src);
}