许多人建议使用jQuery属性和元数据处理来解决这个问题。在这里，我只是提出使用全局变量的方法。然而，你可能会遇到一些问题，所以让我解释一下解决方案：
(1). 如果你放置一个
全局变量，请注意你锚点中的href=""。如果你触发了页面重新加载，你就回到了起点，这不好。所以我把它移除了。
(2). 你想在mouseover和mouseout中检查全局变量，做一些像...的事情。
if <triggered from current> return; // disabling check
问题在于在点击函数中，您想要执行类似以下的操作：
if <there is a current> current.trigger('mouseout');
<set new current>
current.trigger('mouseover')
但是由于我们通过禁用检查禁用了mouseout和mouseover，因此触发这些事件不起作用。
在这里您有两个选择：a）您可以将当前设置为null，触发这两个事件，然后将当前设置为所单击的选项；b）或者您可以将over/out效果与触发器隔离开来，以便您可以在两个位置调用它。
选项（a）是更复杂的单击处理程序，但更简单的鼠标处理程序。选项（b）需要进行更多的重构，但如果您喜欢使用其他jQuery功能，则可能是一个好主意。
(3). 因为我没有使用jQuery习语而是使用了您的方法，所以需要小心正则表达式，以使其匹配应该匹配的内容。我已经这样做了。
(4). 下面的代码将单击附加到锚点中，就像您提到的那样（尽管有些解决方案提到了图像本身）。这里的问题是如何将所单击的对象与相应的图像链接起来。在下面的代码中，jQuery的find()是关键。
(5). 在jQuery中最好不要使用全局变量，即在window对象级别上的变量。您仍然可以通过在涉及闭包之前声明变量来获得相同的结果，如下所示。此外，人们喜欢使用$表示包含jQuery包装对象的变量，我也这样做了。
(6). 最后，要注意对象比较。下面的代码确保我们比较DOM对象，因此请使用jQuery的get()。
因此，这是修改后的HTML（已删除href）：
<a id="anchor1" class="imageLink" ><img class="hoverImage" src="images/1.png"/></a>
<a id="anchor2" class="imageLink" ><img class="hoverImage" src="images/2.png"/></a>
<a id="anchor3" class="imageLink" ><img class="hoverImage" src="images/3.png"/></a>
（抱歉，图像URL与您的不同，我实际上测试了下面的代码）
方法（a）：
<script type="text/javascript">
$(function() {
var clickedImg = null;
$("img.hoverImage")
.mouseover(function () {
var $img = $(this);
if ($img.get(0) == clickedImg) return;
var src = $img.attr("src").match(/[^_\.]+/) + "_hover.png";
$img.attr("src", src);
})
.mouseout(function () {
var $img = $(this);
if ($img.get(0) == clickedImg) return;
var src = $img.attr("src").replace("_hover","");
$img.attr("src", src);
});
$("a.imageLink").click(function() {
var oldClicked = clickedImg;
clickedImg = null;
if (oldClicked) $(oldClicked).mouseout();
var newClicked = $(this).find('img').get(0);
$(newClicked).mouseover();
clickedImg = newClicked;
alert($(this).attr('id') + " clicked");
});
});
</script>
而方法（b）：
<script type="text/javascript">
$(function() {
var clickedImg = null;
function doOver($img) {
var src = $img.attr("src").match(/[^_\.]+/) + "_hover.png";
$img.attr("src", src);
}
function doOut($img) {
var src = $img.attr("src").replace("_hover","");
$img.attr("src", src);
}
$("img.hoverImage")
.mouseover(function () {
var $img = $(this);
if ($img.get(0) == clickedImg) return;
doOver($img);
})
.mouseout(function () {
var $img = $(this);
if ($img.get(0) == clickedImg) return;
doOut($img);
});
$("a.imageLink").click(function() {
if (clickedImg) doOut($(clickedImg));
clickedImg = $(this).find('img').get(0);
doOver($(clickedImg));
alert($(this).attr('id') + " clicked");
});
});
</script>
选项（a）保留了你的结构，但我认为选项（b）应该是你下一步并且也是我的首选。
