你遇到的问题根源很明确：在mouseover事件处理函数里，你用$('.productImage').attr('src')获取图片地址，但jQuery的attr()方法在匹配多个元素时，只会返回第一个匹配元素的属性值，所以不管你悬停哪张图片，拿到的都是第一张图的src。

要解决这个问题，只需要在事件回调里用$(this)来指代当前触发鼠标悬停事件的图片元素，这样就能精准获取当前悬停图片的src了。

修改后的代码如下：

$(document).ready(function () {
    $('.productImage').mouseover(function () {
        // 用$(this)获取当前触发事件的图片元素
        var imageUrl = $(this).attr('src'); 
        // alert(imageUrl);
        $.ajax({
            type: "POST",
            url: "WebServiceVar.asmx/getVarImage",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{'imageUrl':'" + imageUrl + "'}",
            success: function (data) {
                // 这里可以处理返回的data
            }
        })
    });
});

如果你的需求是获取图片的ID，只需要把$(this).attr('src')改成$(this).attr('id')即可，原理完全一致——通过$(this)锁定当前交互的元素，避免选中所有匹配的图片。

内容的提问来源于stack exchange，提问作者LUGYA