Question

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

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

这是＆＃34;最有效的＆＃34;我有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/

Answer 2

使用jQuery（this）来保存个人.slidswap_moused_over

见脚本： -

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(this).find(".slidswap_left_image").css({ "width": relativeX });
        jQuery(this).find('.slidswap_drag_message').css({ "opacity": 0 });
    });
});

Answer 3

想想我已经为你修好了吗？对不起，如果我已经调整了一些部分。

jQuery(function($) {
    $(".slidswap_moused_over")

    .each(function(){

        $(this)

        .mousemove(function(e) {

            var offset = $(this).offset();

            var relativeX = (e.pageX - offset.left);
            var relativeY = (e.pageY - offset.top);

            $(this).find(".slidswap_left_image").css({ "width": relativeX });

        })

        .mouseover(function(e){
            $(this).find(".slidswap_drag_message").animate(
                { 
                    "opacity": 0 
                },250);
        });

    })

});

http://jsfiddle.net/shanejones/5DjPw/9/

使用jQuery鼠标悬停定位单个类的Child实例

3 个答案: