Javascript 单击功能应反转图像的颜色，并恢复先前反转图像的颜色

我已经将一幅图像分解为多个部分用于导航。我将这些具有z索引的图像彼此放置在一起。因此，该图像看起来像一幅完整的图像。我正在使用图像地图。当鼠标悬停在图像上时，我希望图像反转颜色。所以当鼠标在一个特定区域上时，我会改变该区域的z索引，将该区域调高，然后对该图像应用颜色反转css。当我点击一个图像时，只有该部分会变黑，当我将鼠标悬停在其他图像上时，mousein mouseout选项会起作用。当我点击另一张图片时，点击的前一张图片应该再次变为白色，而当前图片应该保持黑色。现在发生的是，以前的图像也保持反转颜色（黑色），而当前图像也变为黑色。这是我的代码

$（函数（）{
$（'area'）.mouseover（函数（）{
var imgid=$（this.data（'imgid'）；
$（'#demo'）.text（“鼠标悬停表示”+imgid）；
$（'#'+imgid）
.toggleClass（'invert'，true）
.css（'z-index'，2）；
}).mouseout（函数（）{
var imgid=$（this.data（'imgid'）；
$（'#mi'）.text（“鼠标输出表示“+imgid”）；
$（'#'+imgid）
.toggleClass（'invert'，false）
.css（'z-index'，1）；
})。单击（函数（）{
var imgid=$（this.data（'imgid'）；
$（“#演示”）.text（“单击以获取”+imgid）；
$（'#'+imgid）
.toggleClass（'按下'）
.css（'z-index'，2）；
});
});
函数Prev（）
{
$（'.pressed'）.removeClass（'pressed'）；
$（'#'+imgid）
.toggleClass（'按下'）
.css（'z-index'，2）；
}

#容器img{位置：绝对；}
倒转{
过滤器：倒置（100%）；
-webkit过滤器：倒置（100%）；
-moz滤波器：反向（100%）；
-o型过滤器：反向（100%）；
-ms过滤器：倒置（100%）；
}
img.pressed{
过滤器：倒置（100%）；
-webkit过滤器：倒置（100%）；
-moz滤波器：反向（100%）；
-o型过滤器：反向（100%）；
-ms过滤器：倒置（100%）；
}

您需要在click函数中添加一行，以删除先前单击的元素中的

。按下的
类

.click(function() {
    var imgid=$(this).data('imgid');
    $('#demo').text("click for "+imgid);

    $('.pressed').removeClass('pressed');

    $('#'+imgid)
        .toggleClass('pressed')
        .css('z-index',2);
});

从单击处理程序中的其他元素中删除
按下的
类

.click(function() {
        var imgid=$(this).data('imgid');
        $('#demo').text("click for "+imgid);
        var $currImg =  $('#'+imgid)
        $('.pressed').not($currImg).removeClass('pressed');
        $currImg
            .toggleClass('pressed')
            .css('z-index',2);
    });

只有一个选择的项目，我只需将选定的项目存储在变量中，并将其切换到下一个选择（也考虑创建用于选择/取消选择的函数）。p>
$（函数（）{
var-selectedItem；
$（'area'）.mouseover（函数（）{
var imgid=$（this.data（'imgid'）；
$（'#demo'）.text（“鼠标悬停表示”+imgid）；
$（'#'+imgid）
.toggleClass（'invert'，true）
.css（'z-index'，2）；
}).mouseout（函数（）{
var imgid=$（this.data（'imgid'）；
$（'#mi'）.text（“鼠标输出表示“+imgid”）；
$（'#'+imgid）
.toggleClass（'invert'，false）
.css（'z-index'，1）；
})。单击（函数（）{
如果（选择编辑项）
{
选择项
.toggleClass（'按下'）
.css（'z-index'，1）；
selectedItem=null；
}
var imgid=$（this.data（'imgid'）；
$（“#演示”）.text（“单击以获取”+imgid）；
$（'#'+imgid）
.toggleClass（'按下'）
.css（'z-index'，2）；
选择editem=$（“#”+imgid）；
});
});
您想要的行为与您现在的行为有什么不同？（附言：到目前为止看起来棒极了！）助手们，谢谢。我想要两样东西。一个解决了另一个是我想按下两个按钮？一个是前一个，另一个是下一个。当我单击“上一个”时，它将获得当前imgid并高亮显示上一个imgid，并删除当前imgid的高亮显示。当我单击next时，它也应该这样做，但对于next imgid。这就像一个导航系统，好吧，在这种情况下，你可以从我的答案中吸取基本的想法，保留一个撤销/重做堆栈，甚至可能集成了撤销/重做功能。这是JavaScript的一个问题，但它是一种通用的编程模式，您应该在internet上找到有关它的大量信息。而且，并非所有映射都能正常工作；）。试着在“Success”或“Charakter”的文本上悬停，以避免进一步污染评论。你可以随意翻阅，事实上，另一个答案是正确的。刚刚意识到，在
删除
之后调用
切换
，将使您无法在单击该部分时停用该部分。但是，如果这不是预期的功能，那么这个答案是有效的，将
切换
调用改为
添加
也可以使用该按钮使用该功能吗？我想在点击之前和之后导航硬币按钮。