对一堆按钮使用单个悬停脚本，并在鼠标悬停时使用变量？

Question

我试图在鼠标悬停事件上定义一个变量。

我的想法是，我稍后可以使用该变量来替换 DIV ID，并使用“交换图像”路径来创建一个通用的鼠标悬停脚本，我可以将其用于一堆按钮。

因此，我不必一遍又一遍地使用相同的代码，只需切换几个数字即可。

这行得通吗？我尝试了这样的事情：

//define variable on mouseover

$("#world_map_8_button").mouseover(function() {
        var location = "#world_map_8";

    }); 


//use variable within script

   //mouse over/out swap image + 

$(location + "_button").hover(function() {
    $(location + "_button_jpg").attr("src", "img/buttons/map_buttons/world_map/world_map_8_button_over.jpg"); 
        }, function() {
            $(location + "_button_jpg").attr("src", "img/buttons/map_buttons/world_map/world_map_8_button.jpg"); 
        }); 
 });    

这是一些 html 代码来帮助澄清事情，所有按钮都以相同的方式命名。

    <div id="world_map_8_button">
            <img id="world_map_8_button_jpg" src="img/buttons/map_buttons/world_map/world_map_8_button.jpg" width="41" height="41"  alt="" />
        </div>

    <div id="world_map_9_button">
            <img id="world_map_9_button_jpg" src="img/buttons/map_buttons/world_map/world_map_9_button.jpg" width="41" height="41"  alt="" />
        </div>


    <div id="world_map_10_button">
            <img id="world_map_10_button_jpg" src="img/buttons/map_buttons/world_map/world_map_10_button.jpg" width="41" height="41"  alt="" />
        </div>

如果我在 HOVER 函数中声明变量，它会起作用（尽管仅适用于 mouseon），但这没有任何意义，也不会节省劳动力......

$("#world_map_8_button").hover(function() {

                var location = "#world_map_8";

    $((location + "_button_jpg")).attr("src", "img/buttons/map_buttons/world_map/world_map_8_button_over.jpg"); 
        },
        function() {
            $((location + "_button_jpg")).attr("src", "img/buttons/map_buttons/world_map/world_map_8_button.jpg"); 
        }); 

Answer 1

查看您的代码，我认为属性 以 选择器 $=< /code> 会帮助你。您不必设置任何变量来执行此操作，试试这个

$("[id$=_button]").hover(function() {
    $("#" + this.id + "_jpg").attr("src", "img/buttons/map_buttons/world_map/" + this.id + "_button_over.jpg"); 
        }, function() {
            $"#" + this.id + "_jpg").attr("src", "img/buttons/map_buttons/world_map/" + this.id + "_button.jpg"); 
        }); 
 }); 

Answer 2

这是 CSS 的一个很好的候选者。您可以在一张图像中同时包含悬停图像和普通图像，然后在鼠标悬停时设置背景偏移。 W3Schools 很好地解释了该技术

但是，要直接回答您的问题，您可以尝试这样的方法：

$('[id$=_button]').hover(function() {
    $('#'+this.id+'_jpg').attr('src', 'img/buttons/map_buttons/world_map/' + this.id + '_over.jpg');
}, function () {
    $('#'+this.id+'_jpg').attr('src', 'img/buttons/map_buttons/world_map/' + this.id + '.jpg');
});

您只需将其放在页面上即可处理这一切，而无需多个脚本和全局变量声明。

Answer 3

不，那不行。使用 jQuery 的 .data(); 方法。