Javascript 对一组按钮使用单悬停脚本，鼠标上方有一个变量？

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

我的想法是，我可以稍后使用该变量替换DIV ID，并使用“swap image”pahts创建一个通用的mouseover脚本，我可以将其用于一系列按钮

因此，我不必反复使用相同的代码，只需刷出几个数字

这样行吗？我试过这样的方法：

//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"); 
        }); 
 });    

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

这是一些帮助清理东西的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>

---

不，那不行。使用。

不，这样不行。使用。

查看您的代码，我认为属性选择器

$=

将帮助您。您不必设置任何变量来执行此操作，请尝试以下操作

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

---

查看您的代码，我认为属性选择器

$=

将对您有所帮助。您不必设置任何变量来执行此操作，请尝试以下操作

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

---

这是CSS的一个很好的候选者。您可以有一个同时显示悬停图像和普通图像的图像，然后在鼠标悬停时设置背景偏移

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

//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"); 
        }); 
 });    

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

---

您只需将其放在页面上即可完成所有操作，而无需使用多个脚本和全局变量声明。

这是CSS的一个很好的候选者。您可以有一个同时显示悬停图像和普通图像的图像，然后在鼠标悬停时设置背景偏移

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

//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"); 
        }); 
 });    

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

---

您只需将此内容放在页面上即可完成所有操作，而无需使用多个脚本和全局变量声明。

如果您发布标记示例以帮助您更好地完成操作，则会更好。如果您发布标记示例以帮助您更好地完成操作，则会更好。