许多人建议为此使用 jQuery 属性和元数据处理。这里我只是建议使用一个全局变量。但是，您可能遇到的问题很少，所以让我解释一下解决方案：
(1)。如果您放置一个 global 变量，请注意锚点中的 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')
但是由于我们通过禁用检查禁用了鼠标悬停和鼠标悬停，因此触发它们不起作用。
您在这里有两个选择：a) 您可以将 current 设置为 null，触发这两个事件，然后将 current 设置为单击的那个； b) 或者您可以将 over/out 效果与触发器隔离开来，这样您就可以在两个地方调用它。
选项 (a) 是一个更复杂的单击处理程序，但更简单的鼠标处理程序。选项 (b) 需要更多的重构，但如果您更喜欢使用其他 jQuery 功能，这可能是个好主意。
(3)。因为我使用的不是 jQuery 惯用语，而是您的方法，所以需要小心正则表达式，使其与应有的内容相匹配。我这样做是为了。
(4)。下面的代码将单击附加到您提到的锚点（尽管有些解决方案提到了图像本身。）这里的问题是您如何将单击的对象链接到相应的图像。在下面的代码中，jQuery 的 find() 就是线索。
(5)。 jQuery 的最佳实践是不要使用全局变量，即窗口对象级别的变量。您仍然可以获得相同的结果，在所涉及的闭包上方声明变量，如下所示。此外，人们喜欢将 $ 用于保存 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>
（对不起，图片网址不是你的，我实际测试了下面的代码）
方法（a）：
<script type="text/javascript">
$(function() {
var clickedImg = null; // this is common to all closures below
$("img.hoverImage")
.mouseover(function () {
var $img = $(this);
if ($img.get(0) == clickedImg) return;
// note the improved matching !
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; // set to null to trigger events
if (oldClicked) $(oldClicked).mouseout();
var newClicked = $(this).find('img').get(0);
$(newClicked).mouseover();
clickedImg = newClicked; // redefine at the end
alert($(this).attr('id') + " clicked"); // ajax call here
});
});
</script>
并接近（b）：
<script type="text/javascript">
$(function() {
var clickedImg = null; // same global
// refactor the mouse over/out - you could use other jQuery ways here
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"); // presumably your ajax call here
});
});
</script>
选项 (a) 保留了您的结构，但我认为选项 (b) 应该是您的下一步，这是我的偏好。