jquery - 如何获取 JQuery 元素中间函数的 ID？

Question

我试图在用户悬停/单击菜单项时动态更改某些菜单选项的背景图像。为此，我使用 JQuery .css() 方法来更改背景图像。当用户单击菜单项时，我将所有菜单项的背景图像更改回其原始状态，然后修改单击的那个。我如何使用 JQuery 执行此操作？ (图像文件都以相同的方式保存“/PictureLibrary/NavBarShortcuts/'menuItemID'.gif”和“/PictureLibrary/NavBarShortcuts/'menuItemID'Active.gif”) 使用的图像应反射(reflect)菜单项的状态。由于我在使用 PHP 生成默认背景图像时动态分配默认背景图像，因此我不相信我可以使用多类 CSS 来分配背景图像，因为非事件类缺少 CSS。虽然我可能是错的。

这是我所拥有的:

$('.menuItem').css( "background-image", "url(../PictureLibrary/NavBarShortcuts/PRODUCTIDHERE.gif)");
$('.menuItem active').css( "background-image", "url(../PictureLibrary/NavBarShortcuts/PRODUCTIDHEREActive.gif)");

我有多个菜单项，它们都具有从数据库动态生成的不同 ID。即

<div class="menuItem" id="product1">
//I need to change these background images dynamically.
</div>
<div class="menuItem" id="product2">
//I need to change these background images dynamically.
</div>
<div class="menuItem" id="product3">
//I need to change these background images dynamically.
</div>
<div class="menuItem" id="product4">
//I need to change these background images dynamically.
</div>

Answer 1

也许:

$(document).ready(function(){
    $('.menuItem').each(function(i){
        $(this).css("background-image", "url(../PictureLibrary/NavBarShortcuts/"+this.id+".gif)");
    });
    $('.menuItem').click(function(){
        $(this).siblings().filter(".active")
            .removeClass("active")
            .each(function(i){
                $(this).css("background-image", "url(../PictureLibrary/NavBarShortcuts/"+this.id+".gif)");
            });
        $(this).addClass("active")
            .css( "background-image", "url(../PictureLibrary/NavBarShortcuts/"+this.id+"Active.gif)");
    });
});

通过 Firebug 或类似的东西检查这个 fiddle ，看看样式的变化(因为图像不存在，所以它无法加载它们):http://jsfiddle.net/Y9HzN/