javascript - 使用 jQuery mouseover 定位单个类的子实例

Question

当鼠标滑过父 div 时尝试定位子 div 的单个实例时出现问题。

当页面上只有一个 .slidswap_moused_over (父)类实例时，当前编写的代码可以正常工作，但如果有多个实例，则两者都保持相同的宽度。

这是我拥有的“最有效”的 jQuery:-

jQuery(function() {
    jQuery(".slidswap_moused_over").mousemove(function(e) {

         var offset = jQuery(this).offset();
         var relativeX = (e.pageX - offset.left);
         var relativeY = (e.pageY - offset.top);
         jQuery(".slidswap_left_image").css({ "width": relativeX });
         jQuery('.slidswap_drag_message').css({ "opacity": 0 });
    });
});

此处演示 - http://jsfiddle.net/5DjPw/5/

我知道我应该使用 .parent、.children、.siblings 或 .next，但我不确定语法。

如有任何帮助，我们将不胜感激:)

Answer 1

使用this的实例

jQuery(".slidswap_moused_over").mousemove(function(e) {

     var offset = jQuery(this).offset();
     var relativeX = (e.pageX - offset.left);
     var relativeY = (e.pageY - offset.top);
     jQuery(".slidswap_left_image", this).css({ "width": relativeX });
     jQuery('.slidswap_drag_message', this).css({ "opacity": 0 });
});

如图所示:http://jsfiddle.net/5DjPw/6/