如何在嵌套的jQuery函数中更改css

时间:2011-08-07 18:12:11

标签: jquery css dhtml

我正在尝试创建一个元素,当鼠标悬停在其图像上时,它的位置会相应调整。然而,图像正在变化,但css位置没有变化。

的jQuery / JavaScript的:

        var newComment = $('<span>').attr({'id': commentCount}); 
        newComment
            .addClass('comment')  
            .css({
                'top': (yOffset * 100) + 175 + "px",
                'left': (xOffset * 75) + 40 + "px"
            })

            .hover(function(){ //Hover over the comment                       
                newComment

                .removeClass()
                .addClass('commentOver')
                .offset({
                    'top': yOffsets[newComment.id] + 175 - 1250 + "px",
                    'left': xOffsets[newComment.id] + 40 - 1500 + "px"
                });

            },function(){ //Mouse leaves the comment               
                newComment    

                .removeClass()
                .addClass('comment')
                .offset({
                    'top': yOffsets[newComment.id] + 1750 + "px",
                    'left': xOffsets[newComment.id] + 400 + "px" 
                });                      
            });      

CSS:

.comment{
    position: absolute;
    z-index: 10;
    padding: 0px;
    width: 51px;
    height: 70px;
    background-image: url('../img/dropSmall.png');
    font-weight:800;
}

你能看到我出错的地方吗?为什么?

3 个答案:

答案 0 :(得分:0)

是否已将newComment范围添加到文档中?

由于我们没有剩余的HTML / CSS /代码,我不知道这些是否是唯一的问题,但我建议使用$(this)并在removeClass()中传递参数:< / p>

    var newComment = $('<span>').attr({'id': commentCount}); 
    newComment
        .addClass('comment')  
        .css({
            'top': (yOffset * 100) + 175 + "px",
            'left': (xOffset * 75) + 40 + "px"
        })

        .hover(function(){ //Hover over the comment                       
            $(this)
            .removeClass("comment")
            .addClass('commentOver')
            .offset({
                'top': yOffsets[newComment.id] + 175 - 1250,
                'left': xOffsets[newComment.id] + 40 - 1500
            });

        },function(){ //Mouse leaves the comment               
            $(this)
            .removeClass("commentOver")
            .addClass('comment')
            .offset({
                'top': yOffsets[newComment.id] + 1750,
                'left': xOffsets[newComment.id] + 400" 
            });                      
        });   

我没有在jQuery文档中看到你可以在没有传递参数的情况下调用removeClass()。它说你需要一个或多个班级。

此外,如果单位为px,则offset()方法不需要单位。

您可能还想查看toggleClass("a", "b"),这样可以轻松交换两个类。

答案 1 :(得分:0)

您是否定位了元素newComment absolute? 如果元素位于static,则无法使用top和left。

如果您没有,请尝试此操作,而不是当前的.css

.css({
      'top': (yOffset * 100) + 175 + "px",
      'left': (xOffset * 75) + 40 + "px",
      'position': 'absolute'
})

顺便说一下:当您在DOM中编写时,您不必将css属性的名称作为字符串传递。所以这应该是一样的:

.css({
     top: (yOffset * 100) + 175 + "px",
     left: (xOffset * 75) + 40 + "px",
     position: 'absolute'
})

答案 2 :(得分:0)

删除偏移对象参数末尾的“px”;)

.offset({
                'top': yOffsets[newComment.id] + 175 - 1250,// + "px",
                'left': xOffsets[newComment.id] + 40 - 1500// + "px"
            });

如果偏移方法无法将lefttop属性识别为数字,则不会更新元素位置。